1

I'm styling a popup using the className option in leaflet.

Here's the entire code:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <meta name="author" content="eddiearni">
    <title>example</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <style>
      html, body { height: 100% }
      #map{ width: 100%; height: 98%; }

      .popup{background-color:firebrick}

    </style>    
  </head>
  <body>
    <div id="map"></div>
    <script>

      var map = L.map('map').setView([37.769091, -122.467283], 18);

      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        maxZoom: 20,
        minZoom: 9
      }).addTo(map);

      var marker = L.marker([37.769091, -122.467283])
      .bindPopup(L.popup({
        className:'popup'
      })
      .setContent("I am a popup."))
      .addTo(map);
    </script>
  </body>
</html>

and for some reason the styling shows up behind the popup, which is still styled according to leaflet's default CSS:

popup_error

Shouldn't the .popup CSS predominate in the cascade?

Why is there a default styled popup over the background?

Obviously the default styles are still applying here, I'd love to learn how to override them, in order to create individually styled popups for different map features.

  • I always add !important to mine to fix this sort of css issue - but I know it is wrong – Ian Turton Jun 7 '18 at 16:20
  • need to see a functional example, preferably live, to be able to dig into this. there's no way to tell what is rendered here without the markup and styles. – albert Jun 7 '18 at 17:07
  • from example here leafletjs.com/examples/quick-start/example.html you are applying it to the popup container and not the content element. in this example you want to target '.leaflet-popup-content-wrapper' – albert Jun 7 '18 at 17:10
  • I included the whole code in an edit for clarity. I know that i can target .leaflet-popup-content-wrapper , but I want to target only this one popup. Were I to target .leaflet-popup-content-wrapper, wouldn't those edits apply to all the popups on the map, rather than just the one I've classified? – Eddie Arni Jun 7 '18 at 17:48
  • 2
    Only one popup? If it's on a separate layer, then in the forEachFeature function you can pass some style info with the html in the popup content. Without different layers, you would have to put a if.. condition in your onEachFeature to separate different popup contents. – Bill Chappell Jun 7 '18 at 18:37
4

A popup in Leaflet is not one single HTMLElement. If you use the developer tools in your web browser, you'll see that a popup has:

A container for the whole thing:

Screenshot for .leaflet-popup

(note how there's a margin on the bottom of the container; please also note that the behaviour of Leaflet 0.7 versus Leaflet 1.x in regards to this margin did change)

A wrapper for the content:

Screenshot for .leaflet-popup-content-wrapper

The element with the content:

Screenshot for .leaflet-popup-content

The tip:

Screenshot for .leaflet-popup-tip

And the close button:

Screenshot for .leaflet-popup-close-button

The important thing to have in mind is that the className option of L.Popup is applied to the root element of the popup: Screenshot of CSS class affecting only the container

Now, if your question would be a bit more like:

How do I use the className option of L.Popup to change the style not of the root container of a popup, but only of the content?

Then the answer would be: Now that you know that a popup is not a single HTML element, you can use CSS selectors for descendant elements to apply rules to more specific elements, like for example:

/* JS */
L.marker(coords).bindPopup("Hello World", {className: "red-border"});

/* CSS */
.red-border .leaflet-popup-content {
    border:3px solid red;
}
.red-border .leaflet-popup-tip {
    border:6px dashed red;
}

And it will look like:

Screenshot of CSS rules affecting only descendants of the popup


Addendum: Keep in mind that you can read Leaflet's source code for its CSS rules and for L.Popup, so you can see how everything is put together internally.

  • Awesome answer, I appreciate your breaking it down so clearly. Thanks ever so much! – Eddie Arni Jun 11 '18 at 15:51
0

Try this CSS in your html file, and comment out /*.popup{background-color:firebrick}*/

/* Style for popup */
.leaflet-popup-content-wrapper {
background:firebrick
/*background: white;*/
border: solid 3px blue;
color: yellow;
font-size: 14;
}

It will look ugly but it's a great starting point.

  • I don't think you get what I'm trying to do here, I have created a class for the popup called .popup, and I'm trying to apply styles to just that one popup. That's why I created the class in the first place. Styling .leaflet-popup-content-wrapper will apply to every popup on the map, which I specifically do not want to do. – Eddie Arni Jun 7 '18 at 18:37

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.