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.

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

Hi all,

I've applied the above solution and it works. But the selected item goes down (it is the RB itself that goes down):

Is it a bug or an intended feature? Especially when there are only two options, it looks awful:

Do you know a  way to avoid it?

Regards

Tomasz

It could be that the OutSystems UI module has changed some of the styles since this solution was posted, which could be altering the way the selected item is appearing.  Use your browser's inspector to inspect the element to see where any padding, margin, etc. are being applied, and that should help you track down where the styling is coming from and which classes you'll need to override to change it.

Hi,

Some solution or workaround.

Originally the checked item was styled by the following rule:

.radio-button:checked:before,
[data-radio-group].not-valid [data-radio-button] .radio-button:checked:before {
    background-color: var(--color-neutral-0);
    border: 6px solid var(--color-primary);
}

and this thick, 6px border was the source of the problem.

I've changed it to:

.radio-button:checked:before,
[data-radio-group].not-valid [data-radio-button] .radio-button:checked:before {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

and now it looks as (sorry for the changed color):

A little bit heavier look but still much better.

Regards

Tomasz

Just change the width on style tab of radiobutton.

Hello everyone. 

For that solution i made 3 steps:

1- for keep in the same line;

1. .radio-group div[data-radio-button] {
2.     width: auto;
3. }

2- Space of the elements

1. .radio-group div[data-radio-button]:not(:first-of-type) {
2.     padding-left: var(--space-base);
3. }

3- Put they inline when one is checked

1. .radio-button:checked:before {
2.     position: absolute
3. }

before:

after:

There is css class .is-horizontal in outsystemUI but not handle mobile perspective correctly