2

I've been customizing Leaflet in order to let popup display more content by adding scrolling to them. Everything works fine except my content touches top and bottom of the popup window.

How can I add a margin at top and bottom ?

Here's my custom CSS:

.custom-popup, .leaflet-popup-content-wrapper {
    background:#e7e7e7;
    color:#504e4e;
    font-family: 'Molengo', sans-serif;
    font-size:12px;
    line-height:10px;
    border-radius: 2px;
    height : 10 px ;
    max-height:300px;
    overflow:auto;
    }

.leaflet-popup {
    position: absolute;
    text-align: center;
    }

.custom-popup, .leaflet-popup-tip {
    background: #e7e7e7;
    border: none;
    box-shadow: none;
    }

.leaflet-popup-content { 
     min-width: 100 px !important;
    }

And here's a capture of what I have and what I would like to get: enter image description here

Scrollbar is on the right side of the popup : enter image description here

EDIT : Blur effect I try to obtain (red arrows) enter image description here

  • Where is the vertical scroll bar in the 'I want to have' picture? – TomazicM Jun 27 at 15:47
  • I did put an screen cap to show scrollbar. It's on the mac so it disappears fast when inactive – Laurent Jun 27 at 16:27
5

I couldn't get your strategy that both custom-popup and leaflet-popup-content-wrapper style classes have overflow: auto property to work properly.

I moved overflow: auto property to leaflet-popup-content style class which is applied only to inner content of popup.

Here is working solution that has been tested on IE11 and latest versions of Firefox and Chrome:

.custom-popup {
    border-radius: 2px;
    color: #504e4e;
    font-family: 'Molengo', sans-serif;
    font-size: 12px;
    line-height: 10px;
    height: 10 px ;
    max-height: 300px;
    }

.custom-popup, .leaflet-popup-tip {
    background: #e7e7e7;
    border: none;
    box-shadow: none;
    }

.leaflet-popup-content-wrapper {
   background: #e7e7e7;
   border-radius: 2px;
   }

.leaflet-popup {
    position: absolute;
    text-align: center;
    }

.leaflet-popup-content {
    margin-top: 20px;
    margin-right: 2px;
    padding-right: 12px;
    min-width: 100 px !important;
    max-height: 300px;
    overflow: auto;
    }
</style>

Popup has to be defined with className: 'custom-popup' property:

var myPopup = L.popup({className: 'custom-popup'}).setContent('....');

Below are examples of popup with overflow and scroll bar and without overflow:

enter image description here

enter image description here

  • Hello TomazicM, Thanks you very much for your help ! You right about Overflow position. I didn't manage to get it. Thanks a lot ! – Laurent Jun 27 at 20:47
  • Hi TomazicM Last question : I found the top and bottom a bit harsh and would like to add blur to show content overflow to user and soften a bit the design. Have you an idea on how to add this (I added an image in the original post). Thanks ! – Laurent Jun 30 at 19:45
  • If you want blurr to appear only when there is overflow, I don't think this is achievable with CSS only. It would require some Java Script code. Since this is pure HTML question, you should post it to stackoverflow.com. – TomazicM Jul 1 at 6:57
  • Actually, blur can be there even when there is no overflow – Laurent Jul 1 at 8:26

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.