Inline RadioItems in vertical direction

Dash Python
1

Hello!
Can you please tell me how to expand RadioItems in vertical direction?
Code:



from dash import html
from dash import dcc
import dash
import dash_bootstrap_components as dbc

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

style_charts=dcc.RadioItems(
        [
            {'label':'plotly', 'value':'plotly'},
            {'label':'plotly-white', 'value':'plotly_white'},
            {'label':'plotly-dark', 'value':'plotly_dark'},
            {'label':'ggplot2', 'value':'ggplot2'},   
            {'label':'seaborn','value':'seaborn'},
            {'label':'simple-white','value':'simple_white'},
      
            ],
        'seaborn',
        id='template',
        inline=True,
    )
app.layout=html.Div(children=[
    html.H1(children='My_appl',
           style={
            'textAlign': 'center',
        }),
    dbc.Row([
        dbc.Col([
            dbc.Row(html.H6("My_style")),

           
            dbc.Row(style_charts),
           

        ]),
        dbc.Col([
            dbc.Tabs([
                dbc.Tab(label='my_label'),                  
                    ]), 
        ]),
    ])
], style={
            'margin-left':40,
            'margin-right':40,
        })
if __name__ == '__main__':
    app.run_server(debug=True)

results:

image
image1646×551 10.9 KB

Desired result:

image
image734×694 13 KB

2

I do not have much experience with css, but I think you might take a look into this.

I managed to rotate the radio buttons by changing the dcc.RadioItems. Obviously this is not the requested design but maybe it helps.

    inline=False,
    labelStyle={
        'display': 'block',
        'writing-mode': 'vertical-rl',
        'transform': 'rotate(180deg)',
        'transform-origin': 'left',
    }
1 Like