I've used the jQuery Mobile ThemeRoller to create a theme for a new mobile website I'm working on. In general the theme works well, but the list-divider that's displayed in the ThemeRoller isn't used in my application.

Here's a screenshot illustrating the problem:

ThemeRoller problem .png

The relevant HTML for the page in question is:

<div id="schedule" data-role="page" data-theme="a">
    <div data-role="content" data-theme="a">
        <ul data-role="listview">
            <li data-role="list-divider">8:00 am</li>
            <li><a href="#session">Wele &amp; Keynote</a></li>
            <li data-role="list-divider">9:00 am</li>
            <li><a href="#session">Session title displayed here</a></li>
        </ul>
    </div>
</div>

I've even tried adding a few things I found in the ThemeRoller markup:

<li data-role="list-divider" data-swatch="a" class="ui-bar-a" data-form="ui-bar-a">8:00 am</li>

This has no effect. No matter what I do, it seems to set the class to ui-bar-b. I can live-edit the HTML in Chrome and change ui-bar-b to ui-bar-a and it looks exactly how I would expect.

Am I doing something wrong? Is this maybe a jqm bug?

Using jqm 1.1.0 and jquery 1.7.0.

I've used the jQuery Mobile ThemeRoller to create a theme for a new mobile website I'm working on. In general the theme works well, but the list-divider that's displayed in the ThemeRoller isn't used in my application.

Here's a screenshot illustrating the problem:

ThemeRoller problem http://img.skitch./20120416-8fbfbu41abrci1ym8uthatfi4e.png

The relevant HTML for the page in question is:

<div id="schedule" data-role="page" data-theme="a">
    <div data-role="content" data-theme="a">
        <ul data-role="listview">
            <li data-role="list-divider">8:00 am</li>
            <li><a href="#session">Wele &amp; Keynote</a></li>
            <li data-role="list-divider">9:00 am</li>
            <li><a href="#session">Session title displayed here</a></li>
        </ul>
    </div>
</div>

I've even tried adding a few things I found in the ThemeRoller markup:

<li data-role="list-divider" data-swatch="a" class="ui-bar-a" data-form="ui-bar-a">8:00 am</li>

This has no effect. No matter what I do, it seems to set the class to ui-bar-b. I can live-edit the HTML in Chrome and change ui-bar-b to ui-bar-a and it looks exactly how I would expect.

Am I doing something wrong? Is this maybe a jqm bug?

Using jqm 1.1.0 and jquery 1.7.0.

• javascript
• jquery
• css
• jquery-mobile

1 Answer 1

You can add the data-dividertheme="a" attribute to your data-role="listview" element to force a specific swatch to be used for the divider list-items. By default, if your listview is set to theme a, then the dividers will be set to theme b, so you have to force list-dividers to be the correct theme or you have to build your themes with this in mind.

    <ul data-role="listview" data-dividertheme="a">
        <li data-role="list-divider">8:00 am</li>
        <li><a href="#session">Wele &amp; Keynote</a></li>
        <li data-role="list-divider">9:00 am</li>
        <li><a href="#session">Session title displayed here</a></li>
    </ul>

Here is a demo: http://jsfiddle/8aZpQ/ (this demo forces theme e for dividers)

And here is the documentation for this: http://jquerymobile./demos/1.1.0/docs/lists/docs-lists.html