Bigger Sidebar or Ability to open a wide view

English Forum Product Feedback šŸš€ Features Launched
,
81

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:

image
image1048Ɨ656 40.1 KB

Maximum:

image
image1392Ɨ662 45.3 KB

2 Likes
82

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

83

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
84

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!

85

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.

86

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
87

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
88

Thank you - that worked for me!

89

Any Solution For Mozila Firefox ?

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