Anyone using Dash Leaflet on a mobile device? How do you make the popup size appropriate for the screen size?

Dash Python
1

I’ve been hacking away at this issue for months now. Example: https://user-images.githubusercontent.com/28774550/204154932-d7d41930-6d47-49d1-90c7-5ca619b6c03a.jpeg

You can see that the popup takes up almost all of the space on the map, therefore making it almost impossible to navigate around the map or view the full details of the popup.

I’m using dl.GeoJSON to generate markers on the map.

I thought I could get away with changing the HTML code, i.e instead of <table> using <table height=20> instead, but that doesn’t seem to have done anything. The popup is still too absurdly big.

I find myself wishing that the popup has a similar dynamic resizing ability like dash-bootstrap-components.

A lot of my users are on mobile trying to use this map, so my website is pretty much useless on mobile because of this issue. Any thoughts, suggestions?

2

Hello @the.oldest.house

I’ve never touched Dash Leaflet before but I went to your site and was looking around in the Inspect Element. It looks like you can target the container to adjust the size of the popup:

image
image1245×510 82.4 KB

It looks like you’ve set this to 301px side, not sure if this is something you actually defined for if it’s a default value. With my testing you can adjust the size here, I tried setting width to 25% instead of 301px and that works to shrink the width:

image
image1328×587 120 KB

Here’s how 25% scales when I render my browser as an iPhone 12 Pro:

image
image1442×914 156 KB

Comparison for when it’s at the set 301px width:

image
image425×873 70.2 KB

The class is leaflet-popup-content I’d guess you can do style={"width":25%} but I’m not sure as I’ve never used leaflet before. If not you should be able to target that class with CSS and set width that way.

Not sure how you’d plan on dealing with the height as that’s going to be dependent on the how much data you want to show.

Edit: Right as I posted I had an idea. I’m not very good with css but you probably could add a media query that if on a smaller device you render the font a bit smaller which in theory would shrink the height. Lastly it looks like you have a 1px padding on the top and bottom of each row. In theory you could also reduce this to 0px which will give you back 2px per row of data (Or you could remove just the top/bottom which would make it only a 1px padding between rows)

1 Like
3

hey @payton-dev , thank you so much for providing such a detailed post. That was some amazing info; I really appreciate it.
Thanks to you I’m able to use CSS to style the Leaflet popup window. That and the F12 dev tools are a really clever method, it seems so simple now! I’m not a web dev so CSS is brand new to me but I can already see how powerful and flexible it is.

Here’s what it looks like so far; I changed the padding to 0 and reduced the font size. I have a CSS media query to only apply these when the screen width is <768px wide which seems to be good enough so far.

image
image393×679 116 KB

The website is much easier to navigate and use while on a mobile device now.

One thing I can’t figure out is how to reduce the height of the popup and add a scroll bar when it overflows. I’ve tried targeting the HTML <table> and <tbody> using their IDs:

#popup_html_table {
        max-height: 2px;
        overflow-y: scroll;
    }

#popup_html_table_body {
        max-height: 2px;
        overflow-y: scroll;
    }

But nothing changes. Any ideas where I should look to do this?