Bigger Sidebar or Ability to open a wide view

Welcome, @Drew_Jackson1,

Sorry to hear that.

Just in case you weren’t aware, you can click on any Team name and open a Team page where 1) all of its projects are listed with no truncation, and 2) no “show more” links required to see all of them.

This is much easier, I feel, than a portfolio, and it never needs your manual syncing to keep updated when projects are created in or removed from the team.

Hope that helps a bit,

Larry

It is wild that you are engaging with this sorting feature idea I don’t see any of this engagement on the issue that people are asking for! lol all we get is a “thanks! but we have no plans to address your concerns.”? bleak yall.

my company uses chrome and and we used to be able to just run an site specific styling extension where we could have some custom css applied only to asana allowing us to expand the bar (maybe if you’re using a different browser you could still rig something like this
 but we shouldn’t have to!) Now that option. o longer worked bc they’re fixed? :frowning: atleast allow us to alter the width on our own browsers! is it that you’re super insistent on your interface? 17 characters for projects isn’t enough. and we here have never used the sidebar as shortcuts its main nav my dudes! does anyone else use the project view as she described? would much rather stick with the accordions in the side bar.

is there anyway you can help us out code wise/CSS wise/browsers settings wise (no way were zooming out to 10% to peak beyond the sidebar) that we can apply in a website specific styling browser extension that will allow us some flexibility here? yall changed it. you gotta acknowledge that at least.

please weeeeeeeeeeeeeeeeeeeneed-yor-elp

How on earth is this not being addressed. Asana is great. The ONLY problem that everyone in our team has is the width of the sidebar.

Look at the size of this thread. Why is no one addressing this? And no, I don’t want to click on Portfolio, I don’t want to click on the Team and then the project, etc. I just want to see the name of the project in sidebar of a reasonable width. 240px is insanely small for someone that works in Asana all day on a large screen, flicking between a lot of projects.

Suggestion: will someone from the development team please tell us:
a) why it’s impossible to do
b) why it’s possible to do, but won’t do it
c) when it’ll be done

I love Asana, but this sidebar is ridiculous. Surely someone at Asana, using Asana to manage Asana, will know this?

2 Likes

If you go here:

In one of the screen grabs there is a team called “Customer appreciation event”
It shows up perfectly.

If I go to my Asana account I enter that team name, it appears like this:
“Customer appreciati”

You seem to have a wider sidebar. How come?
Why can’t your customers have a wider sidebar?

1 Like

Left sidebar is very narrow & cuts off text of some projects that are even just 2 words. The ability to choose a few different size options would be great.

Good news everybody!

It seems like this feature is coming with the new sidebar design!
You can simply click and drag to change the width of the sidebar to almost double the width :star_struck:

Thank you Asana team, keep up the great work :muscle:

Original:

Maximum:

2 Likes

Hi,

Our project names are quite long, and we can’t see the projects in the sidebar.

Is there any way to adjust the sidebar?

Ideally, it would be awesome to drag it left to right and adjust as necessary.

As a quick fix - is there a way you can modify the pages source code / html in our browser to modify the width of the side bar?

Sam

For anyone who searches and finds this topic, I solved the solution by doing the following:

  1. Download “User CSS” Google Chrome Extension
  2. Open Any Asana page
  3. Right click / inspect (in chrome)
  4. Copy and paste CSS code into the extension USER CSS
  5. Search for any 244px and replace with 400px (or any size that you need to get a wider sidebar)
  6. Turn On
12 Likes

Thanks Sam - I took your example and expanded slightly. I wanted wider “pills” as the custom field dropdowns. I changed to this:

/* Widen task list custom field columns (type: Drop-down). */
.CustomPropertyHeader–editable .CustomPropertyHeader-fieldHeading–enum {
width: 100px;
}
.CustomPropertyEnumEditablePreviewCell {
width: 120px;
}

It seems like the second has to be approximately 20px wider than the first. This was a huge help - my dropdowns were a little wordier and all cut off. Was banging my head on this one 


THANKS!

Hello, is this trick still working for anyone? I can’t seem to find the “244” value in the solution post. Thank you in advance! This would be a welcome visual change.

Pasting the following into User CSS did the trick for me:

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

1 Like

Thanks @Ken6 . @JohnnyHuynh, something like that just worked for me in MS Edge:
inspect page html (Ctrl+Shift_I)
find “.AsanaMain-sidebar”
replace width 244 with 320 or whatever
Of course, it would be much better if the sidebar was just re-sizeable by click and drag.

2 Likes

Thank you - that worked for me!

Any Solution For Mozila Firefox ?

Yes, you can use Stylus! It’s a :trophy: recommended extension for Firefox Stylus – Get this Extension for 🩊 Firefox (en-US)

This is the style that I use:

#asana_sidebar {
    width: 300px;  /* You can customize this value, the default is 240px. */
}
#asana_sidebar.AsanaMain-sidebar--isCollapsed {
    width: 240px;  /* Don't customize this. */
}
2 Likes

Hi

I came across this post after having the same issue. I used the CSS code that was provided in the comments below, but wanted to know how can you permanently set this? When I refreshed the page, it went back to the old coding.

Hi @Almier_McCoy,
welcome to the Asana Forum!

Did you use Stylus or did you inserted the CSS in the Style Editor tab in the browser? In the second case the changes can’t survive a page refresh. The Stylus plugin is the way to save them permanently.

Please make the sidebar in the browser view adjustable in the same manner as the columns.

Hovering your cursor over a partial project name is not an acceptable workaround.

Thank you.

8 Likes

Agreed I’m surprised this isn’t an official feature request
 or is it? I find it so strange I can’t have all my users just drag the width of the pane like they can the columns.

2 Likes

I have a workaround using bookmarklets for people who don’t want to install an extension. To use, drag the link below to your bookmark bar, then navigate to an Asana page and click it. It will change the styling in your currently open page.

Visit this page to try it out: Asana bookmarklets | asana-bookmarklets

Code:
Toggle sidebar expansion to 480px:

javascript:(function(){ var desiredWidth = '480px'; if (document.querySelector('.AsanaMain-sidebar').style.width != desiredWidth){document.querySelector('.AsanaMain-sidebar').style.width=desiredWidth}else{document.querySelector('.AsanaMain-sidebar').style.width='240px'}})();

Kudos to ShunS for the Bookmarklet idea.

4 Likes