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

Hi All,

I like both solutions.

The first one I dont think about that.

The second one using CSS, is how I will solve that, just with this little changes:

.radio-group.radio-group--inline div[data-radio-button] {
    width: auto;
    display: inline-flex;
}
.radio-group.radio-group--inline div[data-radio-button]:not(:first-of-type) {
    padding-left: var(--space-base);
}

Use BEM as code convention for modifier, display inline-flex to align contents.

Hope it helps everyone, it helps me.

Best Regards,

Nuno R

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.