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
Just add is-horizontal outsystems class like in image below to radio group
Hi,
Try using AlignCenter widget from OutSystems UI:
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?
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.
ThanksTousif Khan