I am pouring through the CSS and SCSS and I can't seem to make the sidebar wider. I'm displaying tables on it of selected features on a map. I would like it to be at least twice as wide as it is now.
Does anyone have experience with this?
Tried:
<style>
body { margin:10; padding:0; }
#map { position: absolute; top:0; bottom:0; right:0; left:325;}
#properties{position: absolute; border: 2px solid black; top: 300}
#sidebar{width: 900px !important;}
</style>
var sidebar = L.control.sidebar('sidebar', {
position: 'right',
});
map.addControl(sidebar);
Best Answer
You should change the
L.Control.Sidebar.css
(so you should make the lib local) multiple times, cause sidebar's size depends on the window size. I will show you an option of making the sidebar twice larger, you could change values to your purpose. I am adding the whole .css file with comments where there are changes.Here is my result: