Terry Gilliver
Posts: 0
Joined: Fri Apr 18, 2014 8:45 pm

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

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

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

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

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

Terry Gilliver
Posts: 0
Joined: Fri Apr 18, 2014 8:45 pm

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

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

Terry Gilliver
Posts: 0
Joined: Fri Apr 18, 2014 8:45 pm

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

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.

Return to “Issues”