Forum | Appery.io

I have a radio group of two buttons in horizontal layout, i would like them to span the width of the screen and have equal width (50% each). I can't work out the right css to do this.

Hello Terry,

Could you please add this css:
pre.ui-controlgroup-controls {
width:100%;
}
.ui-radio{
width:50%;
}/pre

works perfectly, thanks

Hi Evgene.

I'm looking to achieve the same but not for all radio button groups.
how would I do this for a specific radio button group of 3 buttons?

I tried the code below but it did not work.

code[name="mobileradiogroup_1"] .ui-controlgroup-controls {
width:100%;
}
.ui-radio {
width:33.33%;
}/code

Hello,

Your code works. Please check whether you wrote the name of the radiogroup correctly. Or you may add the class in More Properies for specific radiogroup. And then the css code will affect only the radiogroup you need.
CSS code is as follows:
pre.radiogroup .ui-controlgroup-controls {
width:100%;
}
.ui-radio {
width:33.33%;
}/pre
where .radiogroup this your class radiogroup

Hi Evgene

Thank you, this helped.
he final code that worked for 2 specific radiobuttongroups was:

Class Name: radiogroup1

pre .radiogroup1 .ui-controlgroup-controls {
width:100%;
}
.radiogroup1 .ui-radio {
width:33.33%;
} /pre

Class Name: radiogroup2

pre .radiogroup2 .ui-controlgroup-controls {
width:100%;
}
.radiogroup1 .ui-radio {
width:33.33%;
} /pre

the .className needed to be given before the .ui-radio as well as before .ui-controlgroup-controls

Hi Joe,

Thank you for sharing this!

Sorry the last code in that was supposed to be:

Class Name: radiogroup2

pre.radiogroup2 .ui-controlgroup-controls {
width:100%;
}
.radiogroup2 .ui-radio {
width:33.33%;
} /pre

Hi There, thks to Joe whose css code helped me.

also, I'd like to have the txt inside each toggle centralized
any idea pls?

thks in advance,
Eric

Hi EJLD!

Definitely custom CSS http://devcenter.appery.io/documentat..., but I'm sure you know that... Unfortunately don't have any ready code snippet.