Problem on dbc InputGroupAddon formatting

Dash Python
1

Hi community, first time here. I have a question regarding dbc InputGroupAddon formatting

Capture

I have three inputs with inputgroupaddon prepended. I want to align the addon vertically but I don’t know how to do that. Here’s my code:

dbc.InputGroup(
                [
                    dbc.InputGroupAddon("Issued year greater than ", addon_type='prepend'),
                    dbc.Input(id = 'filter_year', value = 2018, type = 'number', debounce=True)
                ], size = 'sm'
            ),
            dbc.InputGroup(
                [
                    dbc.InputGroupAddon("Outstanding amount greater than ", addon_type ='prepend'),
                    dbc.Input(id = 'filter_amt', value = 300, type = 'number', debounce=True),
                    dbc.InputGroupAddon("million", addon_type ='append'),
                ], size = 'sm'
            ),
            dbc.InputGroup(
                [
                    dbc.InputGroupAddon("Last 30 days volumn greater than ", addon_type='prepend',),
                    dbc.Input(id = 'filter_vol', value = 10, type = 'number', debounce=True),
                    dbc.InputGroupAddon("million", addon_type ='append'),
                ], size = 'sm'
            )
2

Hi @youngasianzack and welcome to the Dash community!

To align the text you can set the width with the style parameter for each dbc.InputGroup like this:

        dbc.InputGroup(
            [
                dbc.InputGroupAddon(
                    dbc.InputGroupText(
                        "Issued year greater than ", style={"width": 225}
                    ),
                    addon_type="prepend",
                ),
                dbc.Input(id="filter_year", value=2018, type="number", debounce=True),
            ],
            size="sm",
        ),

Or for a shortcut, you can add this to the custom css in the assets folder: More info here

.input-group-text {   
    width: 225px !important;   
}
2 Likes