Vertically stack RadioItems as ButtonGroup

I am looking at the " RadioItems as ButtonGroup" example in ButtonGroup - dbc docs

Is it possible to stack those buttons in that example vertically instead of horizontally? There is a vertical property for dbc.ButtonGroup but I don’t think there is one for RadioItems as a button group.

Would appreciate any help!

Hello @ray26,

Yes, it should be possible.

You’ll just need to adjust the css structure that they have for the example. You can alter the flexDirection to be column instead of row. Or vice Versa, you’ll also need to adjust the formatting on the css to make the middle spot square again.

Hi @jinnyzor ,

Thanks for your help! I used flex-direction: column, but it is not making any difference. The following is my CSS code:

/* restyle radio items */
.radio-group .form-check {
  padding-left: 0;
  display: flex;
  flex-direction: column;
}

.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;
}

Here you go, this should get you there. :slight_smile:

.radio-group .form-check {
  padding-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

#radios { /* this is the id of the group */
    flex-direction: column;
}

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

.radio-group .btn-group > .form-check:not(:first-child) > .btn {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
2 Likes

@jinnyzor Thanks a lot! It works perfectly.

1 Like