Page 1 of 1

How can I make a radio button stretch the width of the screen?

Posted: Wed Jun 17, 2015 5:28 pm
by Terry Gilliver

I have a page containing a radio group with one button. I want to populate it from the database so that it has as many buttons as database items.

My problem is this, the text in each field is quite large, and although it appears to wrap, I can't get the radio button to stretch to the width of the screen or radio group.

See attached image. How can I make this button fit the width of the screen. Also can I change the font-size of the text in the radio button?

Image


How can I make a radio button stretch the width of the screen?

Posted: Wed Jun 17, 2015 6:58 pm
by Serhii Kulibaba

Hello Terry,

Radio button is stretch component dy default. Did you put it into grid? What Libraries version do you use?

You can change fontsize via CSS:

pre[name="radiobuttonName"] label{
font-size:12px;
}/pre


How can I make a radio button stretch the width of the screen?

Posted: Wed Jun 17, 2015 9:29 pm
by Terry Gilliver

The radio group is inside a work area of a template. The group itself does stretch the entire width, but the radio button does not. There are no grids on the page. It is using jQuery 1.9.1 and jQuery mobile 1.4.4. I am using the chrome browser Version 43.0.2357.125 (64-bit). I have also used firefox with the same result


How can I make a radio button stretch the width of the screen?

Posted: Wed Jun 17, 2015 9:36 pm
by Terry Gilliver

OK, Sergiy, I found the problem. AT sometime in the past I have added a css rule
.ui-radio {
width: 50%;
}
Taking this out fixed it, Thanks.