✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

DCC tab to align with other components

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…

How do I fix the layout?

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'}
    ),    
])