Zephyr
Reputation: 12496
Vertically align InputGroupAddon in dash dashboard with Python
I am working on a dash dashboard. I am using some dash_bootstrap_components InputGroup. This is what I have done until now:
I would like to vertically align the InputGroupAddon 'prepend' and the InputGroupAddon 'append' of the InputGroup, something like:
I want to stretch the dbc.InputGroupAddon 'prepend' and the dbc.InputGroupAddon 'append' width and let the dbc.Input automatically adjust to fill the width.
I want to keep the overall width to 400.
Here is my code:
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
n = 19
v_min = 0
v_max = 10
v_step = 1
v_0 = 5
app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP])
app.layout = html.Div(id = 'general_div',
children = [html.Div(id = 'options_div',
children = [dbc.InputGroup([dbc.InputGroupAddon(children = 'Option A',
addon_type = 'prepend'),
dbc.Input(id = 't_ON_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = 'unit',
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = 'Option B',
addon_type = 'prepend'),
dbc.Input(id = 't_OFF_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = 'an other unit',
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = 'Some text here',
addon_type = 'prepend'),
dbc.Input(id = 'T_start_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = 'something',
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = 'Last option',
addon_type = 'prepend'),
dbc.Input(id = 'voltage_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = 'last unit',
addon_type = 'append')])],
style = {'display': 'inline-block',
'vertical-align': 'top',
'margin-left': '3vw',
'margin-top': '3vw',
'width': 400})])
if __name__ == "__main__":
app.run_server()
I have tried to specify the 'width' under the style parameter like this:
dbc.InputGroupAddon(children = 'Option A',
addon_type = 'prepend',
style = {'width': 200}),
dbc.Input(id = 't_ON_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = 'unit',
addon_type = 'append')
but I get this:
The dbc.InputGroup is broken between dbc.InputGroupAddon and dbc.Input.
Version info
Python 3.7.0
dash 1.12.0
dash-bootstrap-components 0.10.1
dash-html-components 1.0.3
Upvotes: 1
Views: 7464
Answers (1)
Zephyr
Reputation: 12496
I finally managed to solve the issue.
I have assigned a class to the text spans and linked a local css stylesheet (located in the folder assets\):
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
n = 19
v_min = 0
v_max = 10
v_step = 1
v_0 = 5
app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP, 'box_style.css'])
app.layout = html.Div(id = 'general_div',
children = [html.Div(id = 'options_div',
children = [dbc.InputGroup([dbc.InputGroupAddon(children = html.Span(children = 'Option A',
className = 'prepend-text'),
addon_type = 'prepend'),
dbc.Input(id = 't_ON_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = html.Span(children = 'unit',
className = 'append-text'),
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = html.Span(children = 'Option B',
className = 'prepend-text'),
addon_type = 'prepend'),
dbc.Input(id = 't_OFF_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = html.Span(children = 'another unit',
className = 'append-text'),
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = html.Span(children = 'Some text here',
className = 'prepend-text'),
addon_type = 'prepend'),
dbc.Input(id = 'T_start_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = html.Span(children = 'something',
className = 'append-text'),
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = html.Span(children = 'Last option',
className = 'prepend-text'),
addon_type = 'prepend'),
dbc.Input(id = 'voltage_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = html.Span(children = 'last unit',
className = 'append-text'),
addon_type = 'append')])],
style = {'display': 'inline-block',
'vertical-align': 'top',
'margin-left': '3vw',
'margin-top': '3vw',
'width': 400})])
if __name__ == "__main__":
app.run_server()
I copied the stylesheet class from the dash default and added width, border-radius and text-align properties (width is the key property to solve the above mentioned issue, the rest is for further aesthetic adjustments). Here my local css:
.prepend-text {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding: .375rem .75rem;
margin-bottom: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
text-align: center;
white-space: nowrap;
background-color: #e9ecef;
border: 1px solid #ced4da;
width: 150px;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0rem;
border-bottom-right-radius: 0rem;
border-bottom-left-radius: 0.25rem;
}
.form-control {
display: block;
width: 100%;
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
width: 130px;
text-align: right;
}
.append-text {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding: .375rem .75rem;
margin-bottom: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
text-align: center;
white-space: nowrap;
background-color: #e9ecef;
border: 1px solid #ced4da;
width: 120px;
border-top-left-radius: 0rem;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0rem;
}
Which gives me this layout:
Upvotes: 3
Related Questions
- Plotly Dash: dcc.RadioItems vertical alignment
- Align dash core components horizontally
- Align Python Dash element under a specific Header
- Python Plotly Dash: how the set layout for a vertical screen?
- Centering a dcc.input field in Plotly Dash
- How to place dropdowns side by side in Dash,Python
- Position of a dash dropdown inline with other components
- Align the dash app layout input box with drop down and dates
- How can i auto-align the input boxes in my dash application?
- Plotly Dash center dcc.Input text field