Hi!
I use the MaterialTemplate on a dashboard and use the sidebar for some plot controls. Generally very satisfied with it but it does not seem like the width of the sidebar scales with the width of the controls, see the attached picture. The widgets are appended separately to the sidebar. Does anyone know if this is expected and if there is a setting to control the width, of any other workaround?
Thanks!
Johan
Right now the width is fixed to 300px.
It can be improved based on feature requests on github.
Personally I prefer a fixed width and responsive widgets. That is my experience from lots of work with Panel templates. But I would like to be able to specify the fixed width.
Hi @johan,
If you are using CSS with your template already, then paste the below to your CSS variable. As you can see, I’ve changed the sidebar (mdc-drawer) component’s width to 500px. Easy peasy.
.mdc-drawer {
background: #FAFAFA; /* GRAY 50 */
width: 500px !important;
}
.mdc-drawer.mdc-drawer–open:not(.mdc-drawer–closing)+.mdc-drawer-app-content {
margin-left: 500px !important;
}
If you are not using any CSS yet in your app, then follow the steps below.
raw_css=[css] into your pn.extension()!!! Please, note the above works with the Material template only. If you are using any of the other templates, then what you do is. Go to your venv/site-packages/panel/template dir, then open the relevant template folder, then open the template’s css file. (example: react folder → react.css). Then you need to look for the right CSS component in there. as @Marc mentioned above the default value is 300px. This is the easiest way to identify the right component, just look for 300px. !!!
Hope this helps!
Great info @danmaty
For some of the templates the 300px is also in the Associated HTML template and should be changed as well.
Thanks a lot, @danmaty and @Marc, for engaging with me on this issue. I really appreciate it. 
I tried the CSS modifications and it worked fine for the sidebar, but it seems like the distance from the left side of the window to the content on the right is controlled by another fixed-parameter so it ended up covering part of the content on the right side. I did not want to modify the panel package if I could avoid it so what I ended up with was actually limiting the width of the widgets, an option I did not think of in the beginning, and at least this ensures that they fit on the sidebar…
Br, Johan
I was wondering why I couldn’t get it to work. Did material template change or am I not specifying CSS correctly?
CSS = """
.mdc-drawer {
background: #FFFFFF; /* GRAY 50 */
width: 1000px !important;
}
.mdc-drawer.mdc-drawer–open:not(.mdc-drawer–closing)+.mdc-drawer-app-content {
margin-left: 1000px !important;
}
"""
from constant import CSS
pn.extension(raw_css=[CSS])
Any ideas why this isn’t working?
import panel as pn
RAW_CSS = """
.mdc-drawer {
background: #FAFAFA; /* GRAY 50 */
width: 1000px !important;
}
.mdc-drawer.mdc-drawer--open:not(.mdc-drawer–closing)+.mdc-drawer-app-content {
margin-left: 1000px !important;
}
"""
pn.config.sizing_mode = 'stretch_width'
pn.extension(raw_css=[RAW_CSS])
template = pn.template.MaterialTemplate()
template.sidebar.append(pn.widgets.Select())
template.servable()
Hi @ahuang11 ,
Without actually trying it, I’m guessing it doesn’t work because you are using Panel 0.11.x.
A number of changes have been made in 0.11.0 that were impacting certain CSS elements’ behaviour in certain templates. I still use a previous version of Panel with one of my Heroku apps due to this.
I’d suggest to try it with 0.10.x first baring in mind some of the panes/widgets/etc were not available back then.
See how it goes.
In the next version of Panel (v0.12) all templates have sidebar_width parameter that can be used to solve this problem. C.f. Fix sidebar width issues and make it customizable by MarcSkovMadsen · Pull Request #2301 · holoviz/panel (github.com)
Can’t wait!