Aligning input box with width and height of dropdown

Dash Python
1

Hi,

I am struggling to align the input box (with placeholder = Preis (€/t)) with the dropdown that is placed above. The input box should be the same width and height as the dropdown.

How can I achieve this? (pls. see also my code below)

Thank You!

grafik

@app.callback(
    Output('dropdown-container2', 'children'),
    Input('add-filter2', 'n_clicks'),
    State('dropdown-container2', 'children'))
def display_dropdowns(n_clicks, children):
    new_dropdown = dbc.Row([
                        dbc.Col([
                            dcc.Dropdown(
                            df1['Prozess'].loc[4:5],
                            placeholder='Zusatzstoff-Typ',
                            id={
                            'type': 'Zusatzstoff-dropdown',
                            'index': n_clicks}, style={'text-align':'left', "width": "230px", 'margin-right':'25px'}),
                            
                            dcc.Input(
                            id={'type':'Zusatzstoff-Menge',
                            'index':n_clicks}, type='number', value=0),
                            ], style={'display':'flex', "width": "30%"}),       
                    
                    dbc.Row([
                        dbc.Col([
                                dcc.Input(
                                id={'type':'Zusatzstoff-Preis',
                                'index':n_clicks}, type='number', placeholder='Preis (€/t)'),
                                ], style={"width": "30%"})
                        ])
                    ])
                        
        
    children.append(new_dropdown)
    return childre
2

Hi,

you could define the style of your Input like this:

            dcc.Input(
                id={'type': 'Zusatzstoff-Preis', 'index': n_clicks},
                type='number',
                placeholder='Preis (€/t)',
                style={"width": "230px"}
            )
1 Like
3

Yes, thank you @AIMPED

That worked perfectly!