How to Reduce Size of dbc.RadioItems

Dash Python
1

Hello to every one,
is there anyone that can suggest to me a way to reduce the size of dbc.RadioItems?
I’ve tried to reduce the font_size of the label_style and the input_style but then they become misaligned.

.py:

html.Div(
                [
                    dbc.Label("Radio1"),
                    dbc.RadioItems(
                                   id="radio1",
                                   options= [{"label": "option1", "value": 1},
                                             {"label": "option2", "value": 2},
                                   ],
                                   label_style = {"font-size": "10px",
                                                  # "min-height":"1rem",
                                   },
                                   input_style = {"font-size": "10px",
                                                  # "min-height":"1rem",
                                   },
                                   label_checked_style = {
                                                          "color": "green",
                                                          # "font-size": "10px",
                                   },
                        
                                   input_checked_style = {
                                                          "backgroundColor": "green",
                                                          "borderColor": "#ea6258",
                                   },
                                   labelClassName = "custom-option-radio",
                                   inline = False,

                                   ),
                ]
)

I’ve also tried to change the CSS but the style is not taken… I’m new to CSS and HTML and I’m trying to figure it out a way to proceed.

CSS:

.custom-option-radio{
	font-size: 10px !important;
	min-height: 1.0rem;
}

The main problem is that the content comes out of the parent column.

2

This technically does not answer your question…

but try this package; this radio group component includes a size prop

2 Likes
3

@dragon93

As @ matt1 suggested, the dash-mantine-components makes it pretty simple to change the size of and style of the components.

However, it’s also easy to do in Bootstrap. Just apply the style or a className to the parent container, and the dbc.RadioItems will scale.

If you use Bootstrap class names, it will scale according to your theme. For example, className=“fs-1” will be the same size as the H1 heading. For smaller you can use the "small" class which is 85% of the size of your standard text. You can further customize it with the style parameter.

You can find more Bootstrap class and examples of how to use them with Dash here: https://dashcheatsheet.pythonanywhere.com/

image
image453×661 28.1 KB 

from dash import Dash, html
import dash_bootstrap_components as dbc

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

radioitems = dbc.RadioItems(
    options=[
        {"label": "Option 1", "value": 1},
        {"label": "Option 2", "value": 2},
        {"label": "Disabled Option", "value": 3, "disabled": True},
    ],
    value=1,
)


app.layout = dbc.Container(
    [
        html.Div(radioitems, className="fs-1"),
        html.Br(),
        html.Div(radioitems, className="fs-3"),
        html.Br(),
        html.Div(radioitems, className="fs-6"),
        html.Br(),
        html.Div(radioitems, className="small"),
        html.Br(),
        html.Div(radioitems, style={"fontSize": ".5rem"}),
    ]
)


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

thank you very much! that is exactly what I was looking for.

1 Like