DCC tab to align with other components

Dash Python
1

I am attempting to put DCC Tab and one image icon in one line. Somehow I just cannot get it right, the components overlap each other or it gets in the way of the components below.

app.layout = html.Div([
         html.Div(
         children =[
         dcc.Tabs(id="tabs", value='tab-1',  children=[
         dcc.Tab(label='a', value='tab-1', style = {'line-height': 15, "background-color": "#FFF",
                                                                }),
         dcc.Tab(label='b', value='tab-2', style = {'line-height': 15, "background-color": "#FFF",
                                                                    }),
         ], style = {'height': 15, 'font-size': '110%', "verticalAlign" : "middle",
         "width": "50%",  "background-color": "#FFF", "display": "inline-block",}
         ),
         html.Img(src='data:image/png;base64,{}'.format(encoded_image.decode()),
         height = 30,  style={'width': '10%', 'display': 'inline-block', 'padding': '10px'}),
         ], style = {"width": "100%",}),
         html.Div(
     	className='row',
     	children=[
 		html.Div(dcc.Dropdown(
         id="variable",
         options = hensu2,
         multi=False),
         style={'width': '30%','display': 'inline-block', 'height': '50px', 'padding': '10px 0px 0px 2em'}, 
 		),
         html.Div(
          dcc.RangeSlider(
         id='my-range-slider',
         min=0, max=14,
         value=[13, 14],
         step = None,
         marks = date_list2,
         allowCross=False
         ),style={'width': '60%', 'display': 'inline-block', 'height': '50px', 'padding': '10px'},),
     	],
         style={'width': '100%',}
     ),    
 ])

The results as you can see, is not very pleasant…

image
image704×81 1.79 KB

How do I fix the layout?

2

I have found out the problem. Because I am using dbc.Tab which uses its own set of css given by dbc module. Adjusting css of the tabs will not fix it. What should be done is using the layout provided by dbc module, which uses a grid system. The code below shows one of way of mixing tabs of normal, non dbc class components.

html.Div([
        dbc.Row([
        dcc.Tabs(id="tabs", value='tab-1',  children=[
        dcc.Tab(label='a', value='tab-1', style = {'line-height': 15, "background-color": "#FFF",
                                                               }),
        dcc.Tab(label='b', value='tab-2', style = {'line-height': 15, "background-color": "#FFF",
                                                                   }),
        ], style = {'height': 15, 'font-size': '110%', "verticalAlign" : "middle", 'display': 'inline-block',
        "background-color": "#FFF", "width": "40%"}
        ),
        dbc.Col(html.Img(src='data:image/png;base64,{}'.format(encoded_image.decode()),
        height = 50,  style={'padding': '10px'}),  width={"size": 12, "offset": 9},),
        ],  style ={'display': 'grid'}),
        html.Div(
    	className='row',
    	children=[
		html.Div(dcc.Dropdown(
        id="variable",
        options = hensu2,
        multi=False),
        style={'width': '30%','display': 'inline-block', 'height': '50px', 'padding': '10px 0px 0px 2em'}, 
		),
        html.Div(
         dcc.RangeSlider(
        id='my-range-slider',
        min=0, max=14,
        value=[13, 14],
        step = None,
        marks = date_list2,
        allowCross=False
        ),style={'width': '60%', 'display': 'inline-block', 'height': '50px', 'padding': '10px'},),
    	],
        style={'width': '100%', 'display': 'inline-block'}
    ),    
])