CODEWITHSUNDEEP
jquery-mobile
Simon_Weaver
Simon_Weaver

Reputation: 146140

How to style Radiobutton list in jQueryMobile 1.4.2 with formatted content

I'm trying to create something like the following in jQueryMobile 1.4.2 - i.e. a list of radio buttons with content to explain each option. This is a jquery screenshot from version 1.2 from this great article best practices article. The size of the description text is smaller than the body text.

However when I copy his sample code directly from it comes out sized incorrectly like this (other controls shown for reference size).

enter image description here

Here's the sample code

<fieldset data-role="controlgroup"> 
    <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
    <label for="radio-choice-1">
        <h3 class="ui-li-heading">jQuery Mobile</h3>
        <p class="ui-li-desc">Easy and great for all project from smartphones to dumbphones</p>
    </label>            

    <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />          
    <label for="radio-choice-2">
        <h3 class="ui-li-heading">Sencha Touch</h3>
        <p class="ui-li-desc">Great for complex apps but a higher learning curve</p>
    </label>            

    <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />          
    <label for="radio-choice-3">
        <h3 class="ui-li-heading">jQTouch</h3>
        <p class="ui-li-desc">Simple, lightweight, but focused on webkit</p>
    </label>            
</fieldset>

It turns out the reason the above code no longer works is that it references css class name ul-li-desc which used to be in jquery mobile 1.2.1 css but is no longer in the latest css for version 1.4.2.

The new 1.4.2 version has sample code for something very similar in the ListView component that looks like this

enter image description here

The css class that reduces the size of the font here is .ui-listview>li p

So what's the correct way in jQuery Mobile 1.4.2 to create a radio button list with added content that isn't huge?

Upvotes: 2

Views: 973

Answers (1)

Omar
Omar

Reputation: 31732

The easiest way to undetstand jQM CSS structure, is to firebug current view. jQM changes HTML markup based on widget as it adds extra elements and wraps others in order to each the final UI.

Bear in mind, you have to be specific and caucious when overriding jQM styles. Most of the widgets share the same classes (global classes).

Also note that as of jQM 1.4 to increase performance, the team has reduced the amount of inner elements that are you used for styling widgets.

/* <p> within <label> */
label p {
  font-size: .9em;
  font-weight: 400;
  display: block;
}

/* <h3> & <p> within <label> */
label h3, label p {
  margin: .45em;
}

/* adjust position of radio button itself */
.ui-radio input, label.ui-btn:after {
  top: 35% !important;
}

Demo

Upvotes: 2

Related Questions