1

I was wondering how to have jquery mobile list view display on the left as in the docs located at http://jquerymobile.com/demos/1.0.1/docs/lists/docs-lists.html . The list view resizes very well with ipad and iphone. I tried to copy the content of the docs url and I could not get the same result. Instead the list view displayed as a second block under the main content.

The answer suggested was to use content-primary and content-secondary but this does not work, see example here http://jsfiddle.net/jSkM7/2/

Sid
  • 523
  • 1
  • 5
  • 18
  • Please refer the answers I gave for http://stackoverflow.com/questions/9281792/how-to-create-a-sidebar-in-jquery-mobile-websites/9299364#9299364 and http://stackoverflow.com/questions/8817068/jquery-mobile-content-navigation-collapse-on-a-buton-on-portait/8834776. That should give you some idea.. – user700284 Feb 17 '12 at 04:57
  • Possible Duplicate: http://stackoverflow.com/questions/9281792/how-to-create-a-sidebar-in-jquery-mobile-websites – Phill Pafford Feb 17 '12 at 05:14

2 Answers2

2

I think what you are looking for is defining the

<div class="content-primary">

vs

<div class="content-secondary">

If you place "secondary" content div first in your markup, you get the effect from the first page (http://jquerymobile.com/demos/1.0.1/) where it will fold to the top of the page if you look on an iPhone vs iPad. If you put it after primary, it will fold in, like the one you showed.

The list types are also different, so you should look at the source of those pages to figure out which is more appropriate for your needs.

Sologoub
  • 5,312
  • 6
  • 37
  • 65
0

OK this seems to be a bug in jqm 1.0.1, the suggested answer above works in 1.0.

Sid
  • 523
  • 1
  • 5
  • 18