Block property for dbc.buttongroup

Dash Python
1

Hey,

I am using a Dash Bootstrap Buttongroup and want it to cover the whole space it has.
For single buttons, there is the option to set the property “block” to True in order to have a button that spans the full width of its parent.

Is there a similar option for the Buttongroup? Or somebody has a workaround for this?

Thank you!
Max

2

The dbc.ButtonGroup docs do not mention any such parameter, so I would just give the ButtonGroup some className and make new class in my css file.

So, initiating ButtonGroup with

import dash_bootstrap_components as dbc

button_group = dbc.ButtonGroup(
    [
        dbc.Button("First"),
        dbc.Button("Second"),
        dbc.DropdownMenu(
            [dbc.DropdownMenuItem("Item 1"), dbc.DropdownMenuItem("Item 2")],
            label="Dropdown",
            group=True,
        ),
    ],
    vertical=True,
    className='my-btn-group', # <---------- Added this
)

and then in the css/99_my_styles.css:

.my-btn-group {
  width: 100%;
}

Testing this on the ButtonGroup docs page seems to work:

Before:

image
image1047×100 2.24 KB

After:

image
image1152×303 12.5 KB

You can use the Chrome Developer tools to check out the right css selectors and test the properties yourself. For example, seems that the width is not distributed equally if you have a Dropdown there (just try to edit some other CSS properties, perhaps ones for the dropdown element)

3

Hey Niko,

Thank you so much! That works exactly as I wanted. :slight_smile:

Best regards
Max

1 Like