make horizontal radio group span width of page

[Terry Gilliver]

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.

[Evgene Karachevtsev]

Hello Terry,

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

[Terry Gilliver]

works perfectly, thanks

[Joe Sharples]

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

[Evgene Karachevtsev]

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

[Joe Sharples]

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

[Kateryna Grynko]

Hi Joe,

Thank you for sharing this!

[Joe Sharples]

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

[EJLD]

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

[Maryna Brodina]

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.