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:-
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.
