Images included in dcc.RadioItems are not lining up

Dash Python
1

Hello,

I’m using images in the dcc.RadioItems component, however, the images are not coming out aligned with the component on the same line. I don’t know what’s going on, I think it could be something simple, but I can’t see it, can someone help me?

graphs

app.layout = dcc.RadioItems(
                [                
                    {
                        "label": html.Div(
                            [
                                html.Img(src="/assets/images/barras.png", height=35),
                                html.Div("Bar", style={'font-size': 15,'padding-left': 10}),
                            ], style={'display': 'flex', 'flex-direction': 'row', 'align-items': 'center', 'justify-content': 'left'}
                        ),
                        "value": "Bar",
                    },
                    {
                        "label": html.Div(
                            [
                                html.Img(src="/assets/images/bar_group.png", height=35),
                                html.Div("Group Bar", style={'font-size': 15, 'padding-left': 10}),
                            ], style={'display': 'flex', 'flex-direction': 'row', 'align-items': 'center', 'justify-content': 'left','padding-left': 10}
                        ),
                        "value": "Group Bar",
                    },
                    {
                        "label": html.Div(
                            [
                                html.Img(src="/assets/images/linhas.png", height=35),
                                html.Div("Line", style={'font-size': 15, 'padding-left': 10}),
                            ], style={'display': 'flex', 'align-items': 'center', 'justify-content': 'left','padding-left': 10}
                        ),
                        "value": "Line",
                    },
                    {
                        "label": html.Div(
                            [
                                html.Img(src="/assets/images/pizza_2.png", height=35),
                                html.Div("Pie", style={'font-size': 15, 'padding-left': 10}),
                            ], style={'display': 'flex', 'align-items': 'center', 'justify-content': 'left','padding-left': 10}
                        ),
                        "value": "Pizza",
                    },
                    {
                        "label": html.Div(
                            [
                                html.Img(src="/assets/images/rosca_2.png", height=35),
                                html.Div("Pie 2", style={'font-size': 15, 'padding-left': 10}),
                            ], style={'display': 'flex', 'align-items': 'center', 'justify-content': 'left','padding-left': 10}
                        ),
                        "value": "Pie",
                    },
                ]
    )
2

Hm I tried to change from 'display':'flex' to 'display':'inline' and I think it worked. I did something as below:

from dash import dcc, html
import dash

app = dash.Dash(__name__)
app.layout = dcc.RadioItems(
                [                
                    {
                        "label": html.Div(
                            [
                                html.Img(src="/assets/bars-chart.png", height=35),
                                html.Div("Bar", style={'font-size': 15,'padding-left': 10, 'display': 'inline'}),
                            ], style={'display': 'inline', 'flex-direction': 'row', 'align-items': 'center', 'justify-content': 'left'}
                        ),
                        "value": "Bar",
                    },
                    {
                        "label": html.Div(
                            [
                                html.Img(src="/assets/bars-chart.png", height=35),
                                html.Div("Group Bar", style={'font-size': 15, 'padding-left': 10, 'display': 'inline'}),
                            ], style={'display': 'inline', 'flex-direction': 'row', 'align-items': 'center', 'justify-content': 'left','padding-left': 10}
                        ),
                        "value": "Group Bar",
                    },
                    {
                        "label": html.Div(
                            [
                                html.Img(src="/assets/bars-chart.png", height=35),
                                html.Div("Line", style={'font-size': 15, 'padding-left': 10, 'display': 'inline'}),
                            ], style={'display': 'inline', 'align-items': 'center', 'justify-content': 'left','padding-left': 10}
                        ),
                        "value": "Line",
                    },
                    {
                        "label": html.Div(
                            [
                                html.Img(src="/assets/bars-chart.png", height=35),
                                html.Div("Pie", style={'font-size': 15, 'padding-left': 10, 'display': 'inline'}),
                            ], style={'display': 'inline', 'align-items': 'center', 'justify-content': 'left','padding-left': 10}
                        ),
                        "value": "Pizza",
                    },
                    {
                        "label": html.Div(
                            [
                                html.Img(src="/assets/bars-chart.png", height=35),
                                html.Div("Pie 2", style={'font-size': 15, 'padding-left': 10, 'display': 'inline'}),
                            ], style={'display': 'inline', 'align-items': 'center', 'justify-content': 'left','padding-left': 10}
                        ),
                        "value": "Pie",
                    },
                ], inline=True
    )

if __name__ == '__main__':
    app.run_server(debug=False, port = 8052)

Screenshot 2023-03-02 101030
Screenshot 2023-03-02 101030692×87 3.83 KB

3 Likes
3

@ hoatran,

That’s right, thank you very much, just changing the style to solve, the question was me to know where. Thanks again.

1 Like