Reactive radio group horizontal
Question

How do we make radio group in Reactive display horizontally and not vertically?

Hi, friend.

Just select the RB and change its width value. Can be done through CSS as well.

That behavior comes from the default value 'fill' on width.

mvp_badge
MVP

Behind the scenes the OSFillParent class is being added to the container holding the radio.  That's making them stack since the width is 100% and there's no space to sit inline.  You can override the CSS to set the width to auto, and then they'll fall inline.

Add inline to your Radio Group's Style Classes and add this CSS to your project:

.radio-group.inline div[data-radio-button] {
    width: auto;
    display: inline-block;
}
.radio-group.inline div[data-radio-button]:not(:first-of-type) {
    padding-left: var(--space-base);
}
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.