# Tabs + choropleth responsiveness **URL:** \ **Category:** Dash Python\ **Created:** [August 29, 2018, 6:14pm UTC](https://community.plotly.com/t/tabs-choropleth-responsiveness/13149 "2018-08-29T18:14:49Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![sicco](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/sicco/32/3998_2.png) [@sicco](https://community.plotly.com/u/sicco)\ **Post date:** [August 29, 2018, 6:14pm UTC](https://community.plotly.com/t/tabs-choropleth-responsiveness/13149/1 "2018-08-29T18:14:49Z")
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? ---
**Author:** ![sicco](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/sicco/32/3998_2.png) [@sicco](https://community.plotly.com/u/sicco)\ **Post date:** [September 11, 2018, 4:09pm UTC](https://community.plotly.com/t/tabs-choropleth-responsiveness/13149/2 "2018-09-11T16:09:53Z")
The website is now live, so you can see for yourself what I mean 😃 [https://openmultilaterals.org/](https://openmultilaterals.org/) ---
**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\ **Post date:** [September 11, 2018, 7:36pm UTC](https://community.plotly.com/t/tabs-choropleth-responsiveness/13149/3 "2018-09-11T19:36:30Z")
Could you upgrade dash-core-components? we issued a few fixes to this recently. ---
**Author:** ![sicco](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/sicco/32/3998_2.png) [@sicco](https://community.plotly.com/u/sicco)\ **Post date:** [September 12, 2018, 2:53pm UTC](https://community.plotly.com/t/tabs-choropleth-responsiveness/13149/4 "2018-09-12T14:53:52Z")
@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/](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)? ---
**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\ **Post date:** [September 12, 2018, 5:18pm UTC](https://community.plotly.com/t/tabs-choropleth-responsiveness/13149/5 "2018-09-12T17:18:00Z")
Hm, there isn’t. Are you doing Method 1 or Method 2 of tabs here? [https://dash.plot.ly/dash-core-components/tabs](https://dash.plot.ly/dash-core-components/tabs) ---
**Author:** ![sicco](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/sicco/32/3998_2.png) [@sicco](https://community.plotly.com/u/sicco)\ **Post date:** [September 13, 2018, 12:06pm UTC](https://community.plotly.com/t/tabs-choropleth-responsiveness/13149/6 "2018-09-13T12:06:56Z")
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? ---
**Author:** ![sicco](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/sicco/32/3998_2.png) [@sicco](https://community.plotly.com/u/sicco)\ **Post date:** [September 24, 2018, 11:52am UTC](https://community.plotly.com/t/tabs-choropleth-responsiveness/13149/7 "2018-09-24T11:52:22Z")
Small _bump_ 🙂 ---
**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\ **Post date:** [September 24, 2018, 12:14pm UTC](https://community.plotly.com/t/tabs-choropleth-responsiveness/13149/8 "2018-09-24T12:14:06Z")
There was some recent activity on this issue in [https://github.com/plotly/dash-core-components/issues/256](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? ---
**Author:** ![sicco](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/sicco/32/3998_2.png) [@sicco](https://community.plotly.com/u/sicco)\ **Post date:** [October 1, 2018, 6:25pm UTC](https://community.plotly.com/t/tabs-choropleth-responsiveness/13149/9 "2018-10-01T18:25:47Z")
Wow, after making a small reproducible example I noticed the problem was a forgotten ‘width’ line on my end which messed up the responsiveness ☹. 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/](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](https://plot.ly/python/horizontal-legend/)], but it doesn’t seem to work for my choropleth. ---
**Author:** ![sicco](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/sicco/32/3998_2.png) [@sicco](https://community.plotly.com/u/sicco)\ **Post date:** [October 10, 2018, 11:49am UTC](https://community.plotly.com/t/tabs-choropleth-responsiveness/13149/10 "2018-10-10T11:49:31Z")
Just another small _bump_ 🙂 I think a horizontal legend for choropleths isn’t available, but maybe it is and I do something wrong 😃