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

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

  • glad it worked out :) – Mykola Kozyr Jul 18 '17 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;
}
  • Do you do that with CSS in your index.html file? I tried that and it did not work. :-( – Marcus Holden Jul 18 '17 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. – BritishSteel Jul 18 '17 at 15:28
  • Sorry about that. I've updated the post. – Marcus Holden Jul 18 '17 at 15:31
  • Just curious if you could explain the !important bit? – GISKid Jul 18 '17 at 15:43
  • Maybe try this, right after you add the sidebar: document.getElementById("sidebar").style.width = "900px"; – BritishSteel Jul 18 '17 at 19:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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