Problem with drop-down and input box next to each other

Dash Python
1

Hey,

I am new to dash.

I have problems to align a dropdown with an input box next to each other.
It seems that the drop down gets cropped when I place the input box (with style={'display': 'flex'}) next to it.

I use the external_stylesheets=[dbc.themes.BOOTSTRAP] for the layout.

How can I prevent this and have both components next to each other without overlapping?

Many thanks!

dbc.Row([
        dbc.Col([
            html.H3('Gesteinskörnung'),

            html.Div([
            dcc.Dropdown(
                df1['Prozess'].loc[0:3],
                placeholder='GK-Typ',
                id='GK'
            ),
    ],   style={"width": "20%"}),

        ]),

        dbc.Col([
            html.H3('GK-Menge [kg]', style={'margin-left': '100px'}),

            html.Div([
            dcc.Input(
                id='GK_input',
                type='number',
                value=0,
                placeholder='GK-Menge [kg]'
            )
    ], style={'margin-left': '100px'}),

        ])
    ], style={'display': 'flex'})

grafik

2

Hi @slyfox and welcome to the community!

Seems like it’s the 20% width of the dropdown that crops it, not the input component next to it.
If you change your dropdown’s width to 100%, do you get what you want?

1 Like
3

Hi @jhupiterz, yes that worked!

Thank you so much!

1 Like