Bigger Sidebar or Ability to open a wide view

Community Forum English Product Feedback
,
90

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
91

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.

92

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.

93

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
94

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
95

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
96

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

97

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
98

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?

99

Not working for me : (

100

Why would they remove CSS that allowed customization?

1 Like
101

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

102

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

Thx in advance!
Best
THO

103

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
104

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

1 Like
106

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;}

107

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

108

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?

109

Hi @Brandon_Claycomb , 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
110

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

2 Likes