As you can see i already tried all kinds of style options but with no sucess. Is there any options that sets the inline-block alignment? Or should i use seperae html.div’s for this. Thanks in advance! And sorry if this is a trivial question but i can’t seem to find an answer for it.
I think you just need one of html.Div or dbc.Container and I think you should add width to you each Col to set it horizontal. Something as below might work:
from dash import html, dcc
import pandas as pd
from dash import Dash, Input, Output, State, dcc, html
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
fig = go.Figure()
fig.add_trace(go.Indicator(
mode = "number+delta",
value = 350,
delta = {'reference': 400, 'relative': True},
domain = {'x': [0, 0], 'y': [1, 1]}))
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.LUX])
card1 = dbc.Card(dbc.CardBody([dcc.Graph(figure=fig)]))
card2 = dbc.Card(dbc.CardBody([dcc.Graph(figure=fig)]))
card3 = dbc.Card(dbc.CardBody([dcc.Graph(figure=fig)]))
card4 = dbc.Card(dbc.CardBody([dcc.Graph(figure=fig)]))
app.layout = dbc.Container([
dbc.Row([
dbc.Col([card1], width={'size':3}),
dbc.Col([card2], width={'size':3}),
dbc.Col([card3], width={'size':3}),
dbc.Col([card4], width={'size':3})]),
dbc.Container(
dcc.Markdown("Recent News"))
])
if __name__ == "__main__":
app.run_server(debug=True)
By the way is there a way to prevent the app from resizing for example if the page is viewed with different resolutions? For example if i inspect in chrome as a mobile device all the cards become clustered together… Is there any fix to this behaviour?
