Multiline Listview Items with jQuery Mobile

Question

I can´t figure out how to do multilined listview items in jQuery Mobile depicted in the image below (some additional infos...)

Image: https://lh3.googleusercontent.com/-GSNEPObTo2c/T4m9GbfAcgI/AAAAAAAABec/fot1TgehC6w/s279/Bildschirmfoto%25202012-04-14%2520um%252020.01.37.png

Any ideas?

Thanks a lot, Jakob

Answer 1

If your li items use the following format:

<li>
    <a href="first.html">
      <h3>First line</h3>
      <p>Whatever goes on the second line</p>
    </a> </li>

then add the following to your CSS:

.ui-li-desc {white-space:normal;}​

As an example, see this jsFiddle.