[Python] Plotly Dash dbc column width

In a Plotly Dash application I'm trying to use the horizontal space optimaly.

Right now this is what I have:

from dash import Dash, dcc, html, Input, Output, callback, dependencies
import dash_bootstrap_components as dbc
...
app.layout = dbc.Container(
[
dbc.Row([
dbc.Col(tipo),
dbc.Col(combustivel),
dbc.Col(marcas_dd),
dbc.Col(modelos_dd)
],
),
dbc.Row(dbc.Col(grafico)),
],
style = {'padding': '20px'},
fluid = True
)


There are dcc elements inside dbc columns. The radio buttons and the check boxes contained in dbc columns take to much space and the dropdown list in another dbc column at the right side is squeezed breaking the options lines.

Each of the 4 columns is taking a quarter of the width.



How to make the radio items and checklist to use the least width possible and let the right dropdown use as much as necessary?

Continue reading...