43
Views
6
Comments
Solved
Radio button label alignment
Question
Application Type
Reactive

Hi All,

Quick question.

I'm using the inline class to have my radio buttons display horizontally.



How can I centre the labels against the radio button circle? At the moment the label is inline with the bottom of the circle.

Many thanks =D

Solution

Just add is-horizontal outsystems class like in image below to radio group 

Hi,

Try using AlignCenter widget from OutSystems UI:

Hi,

You can try like this alignment should be proper.

This widget you will get in OutsystemUI  or you can check in your widget section if not than take dependency from OutsystemUI.


Regards

Ruchi

Enclose all labels with each container 

And add

display:flex;

align-items:center; 

This css For containers inline style or create a class with this css and make use that class for all enclosed containers of labels


thanks,

ignesiyasloyala 

This doesn't seem to work?

Solution

Just add is-horizontal outsystems class like in image below to radio group 

Champion

Hello @JayPea 

You just need to add some css and update it, I have added it here in the sample you can check and let me know if it works for you

Code snipet - 

.RadioWrapper [data-radio-group] [data-radio-button] {    -webkit-box-align: center;    -ms-flex-align: center;    align-items: center;    display: -webkit-inline-box;    display: -ms-inline-flexbox;    display: inline-flex;    margin: var(--space-s) 0;    width: fit-content;    margin-right: 10px; }


Sample - https://personal-ejuytnht.outsystemscloud.com/TestAppForm/SampleRadio?_ts=638333228728950550

I have also added a sample oml for you hope it helps.

Thanks
Tousif Khan

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