CODEWITHSUNDEEP
python-3.xplotly-dash
RVA92
RVA92

Reputation: 736

html components stacks instead of columns using dash

I am new to Dash and have run into a problem when trying to setup my application. I want to plot two text boxes side by side. One should take up 1/3 width of the screen and the other should use the remaining 2/3. However, when I run my app, the boxes are on top of each other:

import dash
import dash_html_components as html

content = html.Div([
    html.Div([
        html.Div([html.H4('Simulation time', className='card-title')], className='four columns', style=dict(display='flex')),
        html.Div([html.H4('Simulation results', className='card-title')], className='eight columns', style=dict(display='flex'))
    ], className='row', style=dict(display='flex'))
], style=dict(display='flex'))

app = dash.Dash(__name__)
app.layout = content

if __name__ == '__main__':
    app.run_server(debug=True)

Any help is appreaciate.

Upvotes: 1

Views: 754

Answers (1)

coralvanda
coralvanda

Reputation: 6616

Your code worked fine when I ran it without changes. The text appeared side by side. I've updated it to give the widths you're looking for.

content = html.Div([
    html.Div([
        html.Div([html.H4('Simulation time', className='card-title')], className='four columns', style=dict(width='33%')),
        html.Div([html.H4('Simulation results', className='card-title')], className='eight columns', style=dict(width='66%'))
    ], className='row', style=dict(display='flex', width='100%'))
], style=dict(display='flex'))

Upvotes: 2

Related Questions