Using tabs for one part on a vertical split dashboard

Dash Python
1

Hey folks,

I’m new here and fairly new in dash and plotly. I have a dashboard which split the screen basically in two columns using html.Div. In the right column i have two horizontal parts using html.Div. In the lower part i want to have tabs. Without the dcc.Tabs and dcc.Tab component everything work fine. I have to figures in the left column to html.Divs’s with several figures in the right column. The bottom of all columns is aligned.

Once i add the Tab components the content of the right column slips down. Could this be a bug?

Here’s my partial layout code:

html.Div(
[html.Div(
[dcc.Graph(id=‘map’, figure=fig_map),
dcc.Graph(id=‘timeseries’, figure=fig_ts)]
, style={‘backgroundColor’: colors[‘background’], ‘width’: ‘59%’,‘display’: ‘inline-block’}
)
,html.Div([html.Div(
[html.Img(src=‘data:image/png;base64,{}’.format(some_img_base64)),])
,html.Div([
dcc.Tabs(id=“tabs”,children=[
dcc.Tab(label=‘Tab one’, children=[
html.Div(
[dcc.Graph(id=‘pie_1’, figure=pie_1)]
,style={‘backgroundColor’: colors[‘background’], ‘width’: ‘49%’,‘display’: ‘inline-block’} )
,html.Div(
[dcc.Graph(id=‘pie_2’, figure=pie_2)]
,style={‘backgroundColor’: colors[‘background’], ‘width’: ‘49%’,‘display’: ‘inline-block’} )
,html.Div(
[dcc.Graph(id=‘pie_3’, figure=pie_3)]
,style={‘backgroundColor’: colors[‘background’], ‘width’: ‘49%’,‘display’: ‘inline-block’} )
,html.Div(
[dcc.Graph(id=‘pie_4’, figure=pie_3)]
,style={‘backgroundColor’: colors[‘background’], ‘width’: ‘49%’,‘display’: ‘inline-block’} )
]
)
])
]
)
]
, style={‘backgroundColor’: colors[‘background’], ‘width’: ‘39%’,‘display’: ‘inline-block’}
)])

Can anyone help me?

desired layout

correct_layout
correct_layout799×398 83.9 KB

broken after adding tabs

broken_layout
broken_layout800×482 179 KB

2

Hi

I think you are looking at six column by six column plot as you are dividing the page or tab into two. Once you add a row to contain two plots. You can then separate them by six columns each so that they remain intact on the page.

Do take a look at the example here:

3

i still don’t really get it, but somehow it’s working. :slight_smile: Thanks!

1 Like