Dash-BootStrap-Components alignment problem

Dash Python
1

I notice a misalignment in the input control wrt the text (compared to the example given here. Can anybody provide insight into how to fix this?

Screenshot%20from%202019-10-29%2015-52-14

dash                      1.4.1    
dash-bootstrap-components 0.7.2    
dash-core-components      1.3.1    
dash-daq                  0.2.2    
dash-html-components      1.0.1    
dash-renderer             1.1.2    
dash-table                4.4.1  

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html

app = dash.Dash(
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    # these meta_tags ensure content is scaled correctly on different devices
    # see: https://www.w3schools.com/css/css_rwd_viewport.asp for more
    meta_tags=[
        {"name": "viewport", "content": "width=device-width, initial-scale=1"}
    ],
)
app.config.suppress_callback_exceptions = True


inline_radioitems = dbc.FormGroup(
    [
        dbc.Label("Choose one"),
        dbc.RadioItems(
            options=[
                {"label": "Option 1", "value": 1},
                {"label": "Option 2", "value": 2},
            ],
            value=1,
            id="radioitems-inline-input",
            inline=True,
        ),
    ]
)

inline_checklist = dbc.FormGroup(
    [
        dbc.Label("Choose a bunch"),
        dbc.Checklist(
            options=[
                {"label": "Option 1", "value": 1},
                {"label": "Option 2", "value": 2},
            ],
            value=[],
            id="checklist-inline-input",
            inline=True,
        ),
    ]
)

inline_switches = dbc.FormGroup(
    [
        dbc.Label("Toggle a bunch"),
        dbc.Checklist(
            options=[
                {"label": "Option 1", "value": 1},
                {"label": "Option 2", "value": 2},
            ],
            value=[],
            id="switches-inline-input",
            inline=True,
            switch=True,
        ),
    ]
)

app.layout = html.Div(
    dbc.Form(
        [inline_radioitems, inline_checklist, inline_switches]
    )
)

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

Hey @flyingcujo

I just copied your code, ran it, and see this:

image

Is there maybe some css in an assets folder or similar that might be interfering? What OS / Browser are you seeing this on?

3

Thanks for the /assets folder hint! That was the problem!

1 Like