Issue with DataTable (inline-block) and any html,dcc elements

Dash Python
1

Hello, I have a problem with running DataTable embedded with any other elements on the same level.

I want to place 2 or more elements on the same level, I tried a lot of ways, but I just can not place the table and the graph on the same level horizontally.

Capture
Capture805×753 18.8 KB

Such a problem has arisen so far only with DataTable, because it does not allow explicitly setting style = {‘display’: ‘inline-block’}

my code:

               html.Div([
               dash_table.DataTable(
                    data=df_ROC_AUC.to_dict('records'),
                    columns=[{'id': c, 'name': c} for c in df_ROC_AUC.columns],

                    style_header={'backgroundColor': 'rgb(252, 225, 70)',
                                 'color': 'Black'},
                    style_cell={
                        'backgroundColor': 'rgb(255, 235, 122)',
                        'color': 'Black'
                    },
                )],
            style={'width': '40%', 'display': 'inline-block',
                                    'background': '#efefef',
                                   "border":"1px solid #939598"}),
               dcc.Graph(id='VR_graph',
                          style={'width': '25%', 'display': 'inline-block'})
2

I use a stylesheet created by chriddyp to accomplish this. You can include this line in your app.py, but I found it better to download it and include it in your /assets folder (this folder is at the same level as app.py.

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

Here is sample code to show how to get 2 components side-by side. The top level Div has className set to row, thus all the children will be on the same row. The classname for the children components are set to how many columns (out of 12) to use. See the style sheet or the examples in the Dash gallery for more examples. Hope this gets you going…

html.Div(
	className='row',
	children=[
		# Add dropdown for chart-type
		html.Div(
			className='three columns',
			children=[
				dcc.RadioItems(
					id='ChartType',
					options=[
						{'label': 'Tide', 'value': 'tide'},
						{'label': 'Current', 'value': 'current'}
					],
					value='tide',
					labelStyle={'display': 'inlineBlock', 'marginRight': '20px'},
					inputStyle={'marginRight': '7.5px'},
				)
			],
		),

		html.Div(
			className='five columns',
			style={'marginLeft': 75},
			children=[
				dcc.Dropdown(
					id='Station',
					placeholder='Select station...',
					value=None,
					options=params.STATIONS['tide'],
				)
			],
		),
	],
),
2 Likes
3

Thank you so much! it really helped :wink:

1 Like