Is there a way to switch from tabs to dropdown with dash when the screen width reduces?

Dash Python
1

Hi,
So I built a plotly dash app with multiple tabs. The app works fantastic when embedded in a responsive iframe on the desktop screen. However, when I shift to mobile resolution, I only see the tabs within the iframe and not the plot. This is sometimes misleading to the viewers of the website when they open the website on a phone.

So, I thought in the responsive design, it would help to switch from tabs to dropdown when the screen width drops. How do I accomplish this?!

Any other design suggestions are welcome.

My App: https://isb-hpi.herokuapp.com/
The code: Edit fiddle - JSFiddle - Code Playground

2

Hi @skwolvie

I think is not possible to swich from tabs to dropdown, you have to chose one or the other for your app.

Are you using Dash Boostrap components?: Layout - dbc docs

You can specify different layouts according with the size of the screen, for example in my app I set the first part of the page in 3 columns, the first take 2/12 parts of the screen width, the second takes 6/12 parts and the third takes 4/12 parts for medium and large screens, but for small screens it takes different widths and also you can change the order, in my case for small screens the first colums and the third columns are showed together and the second column takes the entire screen but in a new row.
Here is an example of the configuration of the app, in each page size the sum of all size and offsets must be twelve or less, and you can change the order for each screen size:
First Column:

            xs={'size':10, 'offset':1, 'order':1}, sm={'size':4, 'offset':0, 'order':1}, md={'size':4, 'offset':0, 'order':1}, 
            lg={'size':2, 'offset':0, 'order':1}, xl={'size':2, 'offset':0, 'order':1}),

Second Column:

            xs={'size':12, 'offset':0, 'order':3}, sm={'size':12, 'offset':0, 'order':3}, md={'size':10, 'offset':1, 'order':3}, 
            lg={'size':6, 'offset':0, 'order':2}, xl={'size':6, 'offset':0, 'order':2}),

Third column:

            xs={'size':12, 'offset':0, 'order':2}, sm={'size':8, 'offset':0, 'order':2}, md={'size':8, 'offset':0, 'order':2}, 
            lg={'size':4, 'offset':0, 'order':3}, xl={'size':4, 'offset':0, 'order':3}),

Here you can see the app how it change according with the screen size: https://companyanalysis.herokuapp.com/