set popup window size for dynamic content

[Linus Kamb]

I am admittedly a bit of a novice front-end developer, so pardon me if this is obvious.

I am trying to display a Chart.js timeseries chart in a popup window from a leaflet marker.

The problem I am having is that the popup window comes up with the requested width, but only 15px high, and the chart is then displayed below this bar of a popup.

I presume this is happening because the popup content (the chart) has not been set when the popup is opened.  But due to how Chart.js works, the content cannot be set until the popup html has been added to the DOM.

I can force the issue by setting the .leaflet-popup-content height property in leaflet.css, but that seems rather heavy-handed, not to mention it screws up all the other non-chart popups.

I have tried setting the size of the canvas and div elements in html and css, to no avail.

What is the proper way to make this work?  (Avoiding a yes/no question. ;-)

my popup code:

        function makePopup(layer, simCode, tsData) {

               popup_data = tsData;

               var popupHtml = "<div id='popup_div' ><canvas class='chart_popup' id='popup_canvas' ></canvas></div>" ;

               var popup = L.popup({   minWidth:400 })

                                        .setLatLng(map.getCenter())

                                        .setContent(popupHtml)

                                        .openOn(map);

                                 var tsCtx = document.getElementById("popup_canvas").getContext("2d");

               var tsChart = new Chart(tsCtx, {

                       type: "line",

                       data: popup_data,

                       options: {

                               responsive: true,

                               maintainAspectRatio: true,

                       }              

                });

       }

Thanks,

Linus

[Vic Slagter]

Did you try setting maxHeight for the popup?

from: https://github.com/Leaflet/Leaflet/blob/master/src/layer/Popup.js

// @option maxHeight: Number = null
// If set, creates a scrollable container of the given height
// inside a popup if its content exceeds it.
 
 maxHeight: null,

Cheers,
Vic

[Linus Kamb]

Hi Vic,

Apologies for the late reply.  I found a work-around and moved on to other issues.

I have just now tried that, and it made no difference.  Again, I believe the problem is that when the popup is added to the DOM (in the openOn(map) call), it has no content, because the content is dynamically generated and needs the DOM 2D context.  I tried calling the popup.update() method after adding the chart, but that does not help.

Workaround is to add a "spacer" : another div with a transparent image scaled up to the height I want.

thanks

- Linus