jquery mobile radio button group to fit 100% of width

Question

<div data-role="fieldcontain" style="font-size: 84%"  > <!-- style="width: 48% ; float: right" -->
  <fieldset data-role="controlgroup"   data-type="horizontal"  data data-mini="false" data-theme="b" style="width: 98%; " data-corners="false"> <!-- strength -->
    <legend style="text-align: center ; ">גודל</legend>
    <input type="radio" name="radio-strength" id="radio-view-a" value="גדול" data class="blabla" style="background-color: #BF8F54;"/>
    <label  for="radio-view-a" >גדול: 10.50 &#8362;</label>
    <input class="blabla" type="radio" name="radio-strength" id="radio-view-b" value="בינוני"   checked="checked"/>
    <label for="radio-view-b" >בינוני: 6.30 &#8362;</label>
    <input class="blabla" type="radio" name="radio-strength" id="radio-view-c" value="קטן"  />
    <label for="radio-view-c" >קטן: 5.70 &#8362;</label>
  </fieldset>
</div>

Jquery Mobile Radio buttons: in the exmaple above I've managed to fit the horizontal radio buttons to exactly fit by trial and error.

How could it be done in code???

I want the horizontal radio buttons to fit the width of the screen "automatically" and not manually (using the font size 84%) — user3476736, Apr 24 '14 at 16:52

score 8 · Accepted Answer · answered Apr 24 '14 at 16:51

I assume you want the CSS the get the controlgroup looking like the image ?

If so, here is your HTML with all styles removed and some typos fixed:

<div id="myGroup" data-role="fieldcontain"> 
    <fieldset data-role="controlgroup"   data-type="horizontal"  data-mini="false" data-theme="b" data-corners="false"> <!-- strength -->
        <legend >גודל</legend>
        <input type="radio" name="radio-strength" id="radio-view-a" value="גדול" class="blabla" style="background-color: #BF8F54;"/>
        <label for="radio-view-a" >גדול: 10.50 &#8362;</label>
        <input class="blabla" type="radio" name="radio-strength" id="radio-view-b" value="בינוני" checked="checked"/>
        <label for="radio-view-b" >בינוני: 6.30 &#8362;</label>
        <input class="blabla" type="radio" name="radio-strength" id="radio-view-c" value="קטן"  />
        <label for="radio-view-c" >קטן: 5.70 &#8362;</label>
    </fieldset>
</div>

I added an ID to the fieldcontain so we could limit the CSS rules to things in this container:

#myGroup {
    font-size: 84%;
}
#myGroup .ui-controlgroup-label{
    float: none;
    display: block;
    text-align: center;
    width: 100%;
}
#myGroup .ui-controlgroup-label legend{
    font-weight: bold;
    font-size: 130%;   
    width: 100%;
    margin-bottom: 8px;
}
#myGroup .ui-controlgroup-controls {
    float: none; 
    display: block;
    width: 100%;
}
#myGroup .ui-radio{
    width: 33.33%;
}
#myGroup .ui-radio label{
    text-align: center;
    white-space: nowrap;
}

DEMO

You're a genius! Thank you 99.9% :) I only have a small problem now that the text gets cut off because of the "noweap". (it makes a '...' instead of the text... How can I get the text to automatically resize to fit the width of the button - in a way that all the three buttons have the same font size but according to the "longest text" if I am clear enough.... — user3476736, Apr 24 '14 at 17:00
With CSS, you can make media queries for device width and apply smaller fonts for smaller widths: http://jsfiddle.net/ezanker/DD6YC/3/. Other than that, you would need to use JavaScript. See https://github.com/davatron5000/FitText.js, or http://stackoverflow.com/questions/3401136/resize-font-to-fit-in-a-div-on-one-line — ezanker, Apr 24 '14 at 17:31
You're a righteous person. If I had a daughter I would have made her marry you. Again, thank you very much for your help. I saw the example you uploaded to the jsfiddle and it's exactly what I want. for some reason, although I've copy-pasted the @media code from your example, it doesn't work in my browsers (chrome,firefox). Don't know the reason. In any case, Thank you very much! — user3476736, Apr 24 '14 at 17:49
For me the media queries work in both Chrome and Firefox. Good luck! — ezanker, Apr 24 '14 at 18:15

score 0 · Answer 2 · edited Apr 24 '14 at 17:25

0

You should add data-inline="true". Check the demos for radio buttons on the jQuery Mobile site.

edited Apr 24 '14 at 17:25

Omar

32,302
9
69
112

answered Apr 24 '14 at 16:15

user3283104

416
3
5
14

I use the demos as my first reference point. they are great. But they don't offer a solution. In addition, I tried adding the data-inline to each and every tag in my code and it had no effect. – user3476736 Apr 24 '14 at 16:54
Thanks for editing. I was posting through SO mobile app. – user3283104 Apr 25 '14 at 04:49

jquery mobile radio button group to fit 100% of width

2 Answers2