Question

According to the jQuery Mobile Docs any form element inside a container will adopt the data-theme of that container

Query Mobile has a rich theming system that gives you full control of
how pages and forms are styled. By default all form elements inside a
container will automatically adopt the same theme color swatch as
their parent. This allows form elements to blend into their layouts
with minimal work. The data-theme attribute can be applied to any
individual form element to apply any of the lettered theme color
swatches to create contrast and emphasis in your designs.

However it seems that with the most recent release of jQuery Mobile (1.2) this is no longer true, I’ve noticed that form elements now inherit from the data-theme of the page instead of their more immediate parent.

For example given the following markup

<div data-role="page">
<div data-role="header"><h3>Header</h3></div>
<div data-role="content" data-theme="a">
      <ul data-role="listview" data-inset="true" data-theme="c">
        <li>
            <input type="button" value="test" />
        </li>
        <li>
            <select >
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </select>
        </li>
         <li>
           <div data-role="fieldcontain"  data-theme="c" >
         <fieldset data-role="controlgroup"  data-theme="c"  data-type="horizontal" >
            <legend>Group Size</legend>

            <input type="radio" name="testRdoGrp" id="testRdoGrp1" checked="checked" value="1" />
            <label for="testRdoGrp1">1</label>       
            <input type="radio" name="testRdoGrp" id="testRdoGrp2" value="2" />
            <label for="testRdoGrp2">2</label>

         </fieldset>
        </div>
        </li>
    </ul>
</div>
<div data-role="footer"><h3>Footer</h3></div>
</div>

Jsbins:

With JQM 1.1

With JQM 1.2

Using JQM 1.1 the input, select and radio group will use the c theme swatch (inherited from the listview), but when using JQM 1.2 the input, select and radio group will instead use the a swatch.

This seems to be the case even with container’s that have the `data-role=”fieldcontain” (such as the radio group in the example I provided).

Setting the data-theme directly on the element still works but besides that I think the previous behavior makes for cleaner markup in my case I have quite a bit of markup and I would rather not have to go through each element and individually add the data-theme.

Does any one know of some way to revert to the 1.1 behavior?

Answer 1

I still haven’t found this change in behavior documented anywhere, but I’ve found a partial workaround for this issue. Adding the swatch using the ui-body- (plus the letter for the swatch) class causes the elements to inherit the data-theme from the parent.

For example

<ul data-role="listview" class="ui-body-c" data-inset="true" data-theme="c">
    <li>
        <input type="button" value="test" />
    </li>
</ul>