Bigger Sidebar or Ability to open a wide view

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

Thank you, Ian! This is AMAZING and is going to make a lot of people in my org very happy! Kudos!!! :beers:

How about for the desktop app?
I mean the functionality is clearly there because you can do it with the Dev Tools (click and drag the divider).
I’m surprised that this is not built in. Any advice or updates on this?

2 Likes

This used to be the perfect solution - But as of today this code no longer works for me. Does it still work for anyone else?

Not working for me : (

Why would they remove CSS that allowed customization?

1 Like

Hi everyone! Have a look at 2.3.1 here: Introduction to Asana bookmarklets

Hi,
as bookmarklets seem to be disabled ;-(
does anyone have another workaround to adjust the sidebar size?

Thx in advance!
Best
THO

Using the Chrome Extension “User CSS” (User CSS - Chrome Web Store), you can use this CSS to expand the sidebar.

.SidebarHeader {width:400px!important;}
#asana_sidebar {width:400px!important;}

1 Like

(Btw, @Forum-team , perhaps we can merge these two topics?)

1 Like

Thank you Chris! Here’s the CSS that will expand and hide the sidebar if you are accustomed to using the burger icon. Thanks again.

.SidebarHeader {width:400px!important;}
#asana_sidebar {width:400px!important;}

.SidebarResizableContainer–hidden {margin-left: -400px; transition: margin-left 250ms ease-out;}

on MAC with Asana App installed that is the fix to expand the sidebar?

My team would love this feature. Clicking and dragging the side bar doesn’t seem to change the width either in the browser app or desktop app. Has this new interface been fully released yet?

Hi @anon9402732 , I don’t work for Asana and since they don’t make their roadmap public, the launch of the new redesign is unknown, so we all have to sit tight! Shouldn’t be much longer


You can also follow the original post with the announcement by @Marie to know when it will be released:

1 Like

Thanks much, Richard. I wasn’t sure what Partner meant. I appreciate your response.

2 Likes