2

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);
1

2 Answers 2

1

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.

.leaflet-sidebar {
  position: absolute;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  z-index: 2000; }
  .leaflet-sidebar.left {
    left: -1000px; /*has to be larger than any @media widths*/
    transition: left 0.5s, width 0.5s;
    padding-right: 0; }
    .leaflet-sidebar.left.visible {
      left: 0; }
  .leaflet-sidebar.right {
    right: -1000px; /*has to be larger than any @media widths*/
    transition: right 0.5s, width 0.5s;
    padding-left: 0; }
    .leaflet-sidebar.right.visible {
      right: 0; }
  .leaflet-sidebar > .leaflet-control {
    height: 100%;
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 8px 24px;
    font-size: 1.1em;
    background: white; background: rgba(255,255,255,0.75);
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
    -webkit-border-radius: 4px;
    border-radius: 4px; }
    .leaflet-touch .leaflet-sidebar > .leaflet-control {
      box-shadow: none;
      border: 2px solid rgba(0, 0, 0, 0.2);
      background-clip: padding-box; }
  @media (max-width: 767px) {
    .leaflet-sidebar {
      width: 100%;
      padding: 0; }
      .leaflet-sidebar.left.visible ~ .leaflet-left {
        left: 100%; }
      .leaflet-sidebar.right.visible ~ .leaflet-right {
        right: 100%; }
      .leaflet-sidebar.left {
        left: -100%; }
        .leaflet-sidebar.left.visible {
          left: 0; }
      .leaflet-sidebar.right {
        right: -100%; }
        .leaflet-sidebar.right.visible {
          right: 0; }
      .leaflet-sidebar > .leaflet-control {
        box-shadow: none;
        -webkit-border-radius: 0;
        border-radius: 0; }
        .leaflet-touch .leaflet-sidebar > .leaflet-control {
          border: 0; } }
  @media (min-width: 768px) and (max-width: 991px) {
    .leaflet-sidebar {
      width: 600px; } /*make bigger here*/
      .leaflet-sidebar.left.visible ~ .leaflet-left {
        left: 600px; } /*make bigger here (move original map control)*/
      .leaflet-sidebar.right.visible ~ .leaflet-right {
        right: 600px; } } /*make bigger here*/
  @media (min-width: 992px) and (max-width: 1199px) {
    .leaflet-sidebar {
      width: 800px; } /*make bigger here*/
      .leaflet-sidebar.left.visible ~ .leaflet-left {
        left: 800px; } /*make bigger here (move original map control)*/
      .leaflet-sidebar.right.visible ~ .leaflet-right {
        right: 800px; } } /*make bigger here*/
  @media (min-width: 1200px) {
    .leaflet-sidebar {
      width: 920px; } /*make bigger here*/
      .leaflet-sidebar.left.visible ~ .leaflet-left {
        left: 920px; } /*make bigger here (move original map control)*/
      .leaflet-sidebar.right.visible ~ .leaflet-right {
        right: 920px; } } /*make bigger here*/
  .leaflet-sidebar .close {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 31px;
    height: 31px;
    color: #333;
    font-size: 25px;
    line-height: 1em;
    text-align: center;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    cursor: pointer;
    z-index: 8; }

.leaflet-left {
  transition: left 0.5s; }

.leaflet-right {
  transition: right 0.5s; }

Here is my result: enter image description here

1
  • glad it worked out :) Jul 18, 2017 at 19:37
1

You can do that by selecting the sidebar's id (sidebar) and then assigning a width to it.

For example, if you want the sidebar to be 900 pixels wide, you would write:

#sidebar {
    width: 900px;
}

You might have to mark it as !important if it does not work right away:

#sidebar {
    width: 900px !important;
}
5
  • Do you do that with CSS in your index.html file? I tried that and it did not work. :-(
    – MH7086
    Jul 18, 2017 at 15:25
  • You should be able to add a <style> tag in your HTML file. You should show some code, because it is hard to tell without seeing any code. Jul 18, 2017 at 15:28
  • Sorry about that. I've updated the post.
    – MH7086
    Jul 18, 2017 at 15:31
  • Just curious if you could explain the !important bit?
    – GISHuman
    Jul 18, 2017 at 15:43
  • Maybe try this, right after you add the sidebar: document.getElementById("sidebar").style.width = "900px"; Jul 18, 2017 at 19:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.