Change in RadioItems as ButtonGroup in dash-bootstrap-components 1.0.0 vs 0.13?

Dash Python
1

Following the “RadioItems as ButtonGroup” example from ButtonGroup - dbc docs

In 0.13, the buttons would be next to each other as shown in the example.

In 1.0.0, the buttons have a gap between them. ButtonsWithGap
. I think the addition of this div dash-bootstrap-components/RadioItems.js at 8532982b6fa00febe187ffff85bd6b4be8a35345 · facultyai/dash-bootstrap-components · GitHub is responsible for the gap.

I’m not sure what the div is supposed to do? Could it be removed? Or if “inline” is True, maybe display:none? Or maybe I’m making a mistake somewhere? I am open to other ideas that do not require dash-bootstrap-components changes.

Thanks,
Han-Yang.

2

Hi @hlo and welcome to the Dash community :slight_smile:

To show the buttons with no gap between them, you just need to include the following css in the /assets folder. More info on how to do that here.

.radio-group .form-check {
  padding-left: 0;
}

.radio-group .btn-group > .form-check:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.radio-group .btn-group > .form-check:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}
3

Thanks for quick reply! Totally works.

1 Like