CODEWITHSUNDEEP
pythonhtmlcssplotly-dash
Biplab
Biplab

Reputation: 249

Align Python Dash element under a specific Header

I am new to Python Dash and I am trying to create an app with few dropdowns. So far my app.layout looks like below:-

app.layout = html.Div([
    html.H1(children="Container Vulnerability Risk Rating Calculator", style={'color':'#00361c','text-align':'center'
          }),
    html.H2(children="Likelihood Factors", className="abc", style={
                        'backgroundColor':'darkslategray',
                        'color':'lightsteelblue',
                        'height':'25px',
                        'margin-left':'0px',
                        'text-align':'center',
                        'width':'20%',
                        'display':'inline-block'
               }),
    html.H2(children="Impact Factors", className="xyz", style={
                        'backgroundColor':'darkslategray',
                        'color':'lightsteelblue',
                        'height':'25px',
                        'margin-left':'10px',
                        'text-align':'center',
                        'width':'20%',
                        'display':'inline-block'
               }),
    html.Div(
            children="Hosting Environment",
            className="abc",
            style={"font-style": "italic", "font-weight": "bold"},
        ),
    html.Div([
        html.Div([
            dcc.Dropdown(options=[
             {"label": "Application in Build Stage", "value": "1"},
             {"label": "Application is in Production", "value": "2"},
             {"label": "Application is non-Internet facing", "value": "3"},
             {"label": "Application is Internet facing", "value": "4"},          
             ],
             placeholder="Select an option",
             id='demo-dropdown'
            ),
        html.Div(id='dd-output-container')
        ], style={'width': '20%', 'display': 'inline-block'}),
    html.Div(
            children="Control Effectiveness",
            className="abc",
            style={"font-style": "italic", "font-weight": "bold"},
        ),
        html.Div([
            dcc.Dropdown(options=[
             {"label": "Remediation within 12 months", "value": "1"},
             {"label": "Remediation within 6 months", "value": "2"},
             {"label": "Remediation within 3 months", "value": "3"},
             {"label": "Remediation within 1 month", "value": "4"},          
             ],
             placeholder="Select an option",
             id='demo-dropdown-temp'
            ),
        html.Div(id='dd-output-container-temp')
        ], style={'width': '20%'})
    ]),
    html.Div(
            children="Application Complexities",
            className="xyz",
            style={"font-style": "italic", "font-weight": "bold"},
        ),
    html.Div([
        html.Div([
            dcc.Dropdown(options=[
             {"label": "Application in Build Stage", "value": "1"},
             {"label": "Application is in Production", "value": "2"},
             {"label": "Application is non-Internet facing", "value": "3"},
             {"label": "Application is Internet facing", "value": "4"},          
             ],
             placeholder="Select an option",
             id='demo-dropdown1'
            ),
        html.Div(id='dd-output-container1')
        ], style={'width': '20%', 'display': 'inline-block'}),
    html.Div(
            children="Application Criticality",
            className="xyz",
            style={"font-style": "italic", "font-weight": "bold"},
        ),
        html.Div([
            dcc.Dropdown(options=[
             {"label": "Remediation within 12 months", "value": "1"},
             {"label": "Remediation within 6 months", "value": "2"},
             {"label": "Remediation within 3 months", "value": "3"},
             {"label": "Remediation within 1 month", "value": "4"},          
             ],
             placeholder="Select an option",
             id='demo-dropdown1-temp'
            ),
        html.Div(id='dd-output-container1-temp')
        ], style={'width': '20%'})
    ]),
])

The Python App renders this in the below manner:- enter image description here

I need the app to draw the bottom two dropdowns, namely "Application Complexities" and "Application Criticality" to show up under the "Impact Factors" header.

Any help would be greatly appreciated.

Upvotes: 1

Views: 992

Answers (1)

coralvanda
coralvanda

Reputation: 6596

I would use flexbox (great guide here)for this. Something like the following should get you mostly there.

html.Div([
  html.Div([
    html.Div(
            children="Hosting Environment",
            className="abc",
            style={"font-style": "italic", "font-weight": "bold"},
        ),
    html.Div([
        html.Div([
            dcc.Dropdown(options=[
             {"label": "Application in Build Stage", "value": "1"},
             {"label": "Application is in Production", "value": "2"},
             {"label": "Application is non-Internet facing", "value": "3"},
             {"label": "Application is Internet facing", "value": "4"},          
             ],
             placeholder="Select an option",
             id='demo-dropdown'
            ),
        html.Div(id='dd-output-container')
        ], style={'width': '20%', 'display': 'inline-block'}),
    html.Div(
            children="Control Effectiveness",
            className="abc",
            style={"font-style": "italic", "font-weight": "bold"},
        ),
        html.Div([
            dcc.Dropdown(options=[
             {"label": "Remediation within 12 months", "value": "1"},
             {"label": "Remediation within 6 months", "value": "2"},
             {"label": "Remediation within 3 months", "value": "3"},
             {"label": "Remediation within 1 month", "value": "4"},          
             ],
             placeholder="Select an option",
             id='demo-dropdown-temp'
            ),
        html.Div(id='dd-output-container-temp')
        ], style={'width': '20%'})
    ]),
  ]),
  html.Div([
    html.Div(
            children="Application Complexities",
            className="xyz",
            style={"font-style": "italic", "font-weight": "bold"},
        ),
    html.Div([
        html.Div([
            dcc.Dropdown(options=[
             {"label": "Application in Build Stage", "value": "1"},
             {"label": "Application is in Production", "value": "2"},
             {"label": "Application is non-Internet facing", "value": "3"},
             {"label": "Application is Internet facing", "value": "4"},          
             ],
             placeholder="Select an option",
             id='demo-dropdown1'
            ),
        html.Div(id='dd-output-container1')
        ], style={'width': '20%', 'display': 'inline-block'}),
    html.Div(
            children="Application Criticality",
            className="xyz",
            style={"font-style": "italic", "font-weight": "bold"},
        ),
        html.Div([
            dcc.Dropdown(options=[
             {"label": "Remediation within 12 months", "value": "1"},
             {"label": "Remediation within 6 months", "value": "2"},
             {"label": "Remediation within 3 months", "value": "3"},
             {"label": "Remediation within 1 month", "value": "4"},          
             ],
             placeholder="Select an option",
             id='demo-dropdown1-temp'
            ),
        html.Div(id='dd-output-container1-temp')
        ], style={'width': '20%'})
    ]),
  ]),
], style=dict(display='flex')

Essentially, you have one large box with the flex display property, which contains two boxes. Those boxes can be placed side by side, and their contents are your text and dropdown components.

Upvotes: 2

Related Questions