'Leaflet popup misaligned when loading content dynamically

I've got a problem of popup misalignment when its content is dynamically loaded, like this JSFiddle: http://jsfiddle.net/7616xqbb/2/

Using Leaflet 0.7.2 :

var new_marker = L.marker([lat, lon])
        .bindPopup("<div id='popupcontent'></div>", {maxWidth: 500, maxHeight: 300})
        .on('click', function(e){
            $.post("updatecontent.php", {lat: lat, lon: lon},
            function(data) {
                $('#popupcontent').html(data);
            });
        });

map.addLayer(new_marker, true);

where updatecontent.php shows a set of images.

I first had troubles making the size of the popup to adapt to its content. This piece of CSS does the trick:

.leaflet-popup-content {
     width:auto !important;
     height:auto !important;
}

but the popup shifts when it opens...

Any idea? Thanks :)

jquerycsspopupalignmentleaflet


Solution 1:[1]

To align the bindPopup text do as follows

marker.bindPopup('<div id="popupcontent" class="centerClass"></div>');

CSS

.centerClass{
  text-align: center;
}

Solution 2:[2]

try this

const DefaultIcon = L.icon({
  iconUrl: ....,
  shadowUrl: ....,
  popupAnchor: [x, y] // point from which the popup should open relative to
});

try to aligne it based on x and y and that's it, I hope you find it useful.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Pedro Romão
Solution 2 Abdeldjalil Hachimi

Related Questions