Adjust Custom field/Tag/Project field width sizes in task list

It’s called Stylus and then you need to add some CSS to get the look/feel you’re after.

For me that was mostly getting rid of blank / unused white space, improving the spacing in task list columns/headers so you can actually view values in custom fields and then some alternating colors for the task list rows to make everything stand out slightly better:

Hello Asana! @Alexis Is this a feature that will be implemented in the future? Not being able to adjust column widths is very frustrating.

Definitely frustrating. Adjusting column size seems like a table stakes feature for this type of program. And as nice as the Stylish plug in may be, I am not spending money on asana to have enhancements delivered by someone else.

Such a basic feature in ANY column-view software, you have to update this soon. Come on…

Unfortunately, using an extension for this is not secure. Asana needs to add this functionality:

That’s a different browser extension that I believe has been shut down for quite some time.

But yes, I agree that some of these aesthetic improvements to the UI would be welcome - especially with adjusting columns for custom fields.

@Ben_Brenner did you make your style available on stylus - if so what did you call it? I wouldn’t know where to start adding CSS !!! :crazy_face:

Ruth_Newnham, I’m not sure how to publish to Stylus, but below is screen shot and code posted beneath that. Just copy/paste and it should work.

Copy and paste below code

.sidebar-mountNode {
display: flex;
flex: 0 0 auto;
flex-direction: column;
transition: margin-left 250ms ease-out,transform 250ms ease-out;
width: 260px;
}

.PotListPage-gridPane {
flex: 50%;
min-width: 405px;
}

.CustomPropertyEditablePreviewContainer-enumCell {
margin: 0 5px;
width: 130px;
}

.CustomPropertyHeader–editable .CustomPropertyHeader-fieldHeading–enum {
margin: 0 5px;
width: 130px;
}

.CustomPropertyHeader-fieldName {
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}

.TaskList .dropTargetRow:nth-child(odd) {
background: #F5F5F5;
}

Thanks @Ben_Brenner :star_struck:

You’re welcome. I’d suggest keep it open in a separate screen and then you can tweak the input values to get it to work best for you.

Again, very basic CSS, you could go crazy with adjustments but that’s over my pay grade.

This is a no brainer. Please please do this, or at least make the application responsive…

Does anyone know if there is a vote system for Anasa to have features added to their roadmap? I would also love to see that feature added.

This very thread has a vote button at at the top. Definitely give it a vote!

Adding another vote for a responsive width list view instead of a fixed width :roll_eyes:. As much as I love having nice wide columns on either side of my list view while the important information is cut off and difficult to read, it’d be nice to (ya know) read the tasks in my list view.

How is this still not fixed yet?

This seems related to this thread: Adjust Custom field/Tag/Project field width sizes in task list - #25 by Brad_Feddersen
Maybe they should be merged since both have 50+ votes

Agreed.

@Marie could we merge this with Adjust Custom field/Tag/Project field width sizes in task list - #25 by Brad_Feddersen

This is very much needed, especially with all the width that is given with the new Updated List View.

Seems like a no-brainer here now, or at least just make the custom field width slightly larger to account for the new horizontal space that exists.

Thanks so much!

Hi all,

Quick update: following Introducing our new Spreadsheet-Inspired List View!, our team is actively building a solution for column resizing. I will share more details in this post as soon as we start rolling out. Thanks again for sharing your feedback with us, we really appreciate it!

8 Likes

Hi, new to custom fields here. Why do their template examples show wider columns fields if they don’t allow it to users? The look of their templates is one of the reasons I upgraded. For example, this Agency Collaboration template shows large due dates well spaced from the other wide fields. When I implement this template, the column isn’t even large enough to show the entire word ‘Medium’. ?? Thanks