✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

Tabs + choropleth responsiveness

I’m showing 3 choropleths graphs each in their own tab. Without a tab the choropleth resizes correctly to the size of your screen, but when placed in a tab the choropleth is shown in full size on a mobile device and is thus too wide. If I rotate the mobile device the choropleth resizes to the correct width, but it should do this initially when the choropleth is loaded. Is there a way to manually trigger a recalculation of the width of the choropleth?

The website is now live, so you can see for yourself what I mean :smiley: https://openmultilaterals.org/

Could you upgrade dash-core-components? we issued a few fixes to this recently.

@chriddyp Thanks for your reply! I update dash-core-components from 0.28.0 to 0.28.3, but the behavior is the same.

To rephrase; if you visit https://openmultilaterals.org/ on a mobile screen (or simply reduce the size of your desktop browser window between 320px - 500px) and you’ll see that the world map (choropleth) is too wide. If you make the window slightly smaller or larger the world map’s width is redrawn correctly (or e.g., if you switch your mobile device’s orientation). Again, this problem only started after putting the choropleth within a tab. Is there a way for me to manually trigger the recalculation of the width of the choropleth (similar to resizing the window)?

Hm, there isn’t. Are you doing Method 1 or Method 2 of tabs here? https://dash.plot.ly/dash-core-components/tabs

Good suggestion! I used Method 1, but I have now tried Method 2 as well, but the problem exists there as well. Any other ideas?

Small bump :slight_smile:

There was some recent activity on this issue in https://github.com/plotly/dash-core-components/issues/256. Could you try v0.30.2? If that doesn’t work, could you try to create a small reproducable example?

1 Like

Wow, after making a small reproducible example I noticed the problem was a forgotten ‘width’ line on my end which messed up the responsiveness :frowning:. Thanks for all the help though!

One other question. Is it possible to have a horizontal legend for a choropleth? Currently, viewing my choropleths from https://openmultilaterals.org/ on a mobile device makes them really small because the legend at the right takes up a lot of space.

I tried legend=dict(orientation="h") [as seen here], but it doesn’t seem to work for my choropleth.

Just another small bump :slight_smile: I think a horizontal legend for choropleths isn’t available, but maybe it is and I do something wrong :smiley: