Question

I’m using the jquery Mobile AutoDivider for a web project of mine and it works great in IE8, but for some reason in Chrome it’s not generating the headers for me.

My question is: How exactly does the AutoDivider determine what to make a ‘divider’? Is is just the first item within your <li></li>?

Here’s my basic HTML structure (it’s ultimately placed in a ASP.Net Repeater:

<ul data-role="listview" data-autodividers="true">
  <li>
      <img src="mySource.jpg" alt="" />
        <h3><a href="#">John Doe</a></h3>
           <p><strong>Company Name Here</strong></p>
           <p>User Address</p>
           <p class="ui-li-aside">
             <strong style="display: none;"><!-- This is what seems to make the headers in IE, placing this right here: -->
             Last Name of Employee</strong>
            </p>
  </li>
</ul>

Answer 1

see the docu http://jquerymobile.com/demos/1.2.0/docs/lists/docs-lists.html

Autodividers

A listview can be configured to automatically generate dividers for its items. This is
done by adding a data-autodividers="true" attribute to any listview.

By default, the text used to create dividers is the uppercased first letter of the
item’s text. Alternatively you can specify divider text by setting the > autodividersSelector option on the listview programmatically.