CODEWITHSUNDEEP
jquery-mobile
psmail
psmail

Reputation: 53

Changing jQuery Mobile horizontal grouped radio button sets widths: legend vs input split

I am trying to customise the relative widths of jQuery Mobile's horizontal grouped radio button sets.

By default, the relative dimensions of these are roughly (by eye only)

I have tried to alter this split to 50:50 on the following html ...

<div data-role="content">            

  <div data-role="fieldcontain">

    <fieldset data-role="controlgroup" data-type="horizontal" id="ps_test">

      <legend>
        Quite a bit of of text to put here from time to time ...
      </legend>

      <input type="radio" name="radio-choice-2" id="radio-choice-21" value="choice-1" checked="checked" />
      <label for="radio-choice-21">0</label>

      <input type="radio" name="radio-choice-2" id="radio-choice-22" value="choice-2"  />
      <label for="radio-choice-22">1</label>

      <input type="radio" name="radio-choice-2" id="radio-choice-23" value="choice-3"  />
      <label for="radio-choice-23">2</label>

      <input type="radio" name="radio-choice-2" id="radio-choice-24" value="choice-4"  />
      <label for="radio-choice-24">3</label>

      <input type="radio" name="radio-choice-2" id="radio-choice-25" value="choice-4"  />
      <label for="radio-choice-25">4</label>

      <input type="radio" name="radio-choice-2" id="radio-choice-26" value="choice-4"  />
      <label for="radio-choice-26">5</label>

      <input type="radio" name="radio-choice-2" id="radio-choice-27" value="choice-4"  />
      <label for="radio-choice-27">6</label>

    </fieldset>
  </div>

</div><!-- /content -->

… using the following css ...

.ui-controlgroup-label {
    width: 50%;
}

.ui-controlgroup-controls {
    width: 50%;
}

… but this has no affect. I have saved an example of the code to view here

How do you alter the widths of the label and the button set?

Many thanks.

Upvotes: 1

Views: 3351

Answers (1)

jerone
jerone

Reputation: 16871

Your CSS isn't as high priority as the CSS in jQuery Mobile. If you change it to something like this it should be fine:

.ui-field-contain .ui-controlgroup-label {
    width: 50%;
}

.ui-field-contain .ui-controlgroup-controls {
    width: 50%;
}

Just use FireBug, Chrome Developer Tools, Dragonfly or IE Developer Tools next time.

Upvotes: 1

Related Questions