Checklist in dash core or bootstrap components

Dash Python
1

Hello, I would like to know if there is a possibility to have the checkboxes of a checklist on the right site ( or the labels on the left site of the checkboxes, its the same at the end). I use dash bootstrap components at the moment and for labelStyle “block”. Thanks in advance and best regards! Example code snippet:

                                    dbc.Col(dbc.Checklist(
                                        id='testChecklist',
                                        value=[],
                                        labelStyle={'display': 'block', 'color': 'black'},
                                    )
                                        , width=5)
2

You could try adding the following CSS to a file in your assets/ folder

.custom-control {
  padding-left: 0;
}

.custom-control-label::before,
.custom-control-label::after {
  left: unset;
  right: 0;
}

Tested with this app

import dash
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    dbc.Checklist(
        options=[{"label": f"Item {i}", "value": i} for i in range(10)],
        id="checklist",
        labelStyle={"display": "block"},
    ),
    className="p-5",
)

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

I see this

image

Note that the checkboxes are to the right of the container because you set display: block in labelStyle. If you don’t set that, try this CSS instead

.custom-control {
  padding-left: 0;
  padding-right: 1.5rem;
}

.custom-control-label::before,
.custom-control-label::after {
  left: unset;
  right: -1.5rem;
}