How to create a jquery mobile ordered list with list symbols set to outside? -
<ol data-role="listview"> <li> <h3>heading</h3> <p>description</p> </li> </ol>
the result is:
1. heading description
i want:
1. heading description
i have thought have stuck list-style-position:outside inline style li tag. no luck. if remove listview data-role, style applied correctly.
some how listview date-role manipulating styles, can't figure out how though... i've searched list-style-position line in jquery mobile css , js files , no results returned, going on here?
some please?
ps. using jquery mobile 1.0a4.1
looks need add custom css
live example: http://jsfiddle.net/7bn2z/43/ live example #2: http://jsfiddle.net/7bn2z/48/ (fixed layout little)
html:
<div data-role="page" data-theme="b" id="jqm-home"> <div data-role="content"> <ol data-role="listview"> <li> <span> <span class="oi-li-heading">heading</span> <span class="oi-li-desc">description</span> </span> </li> </ol> </div> </div>
css:
.oi-li-heading { font-size: 16px; font-weight: bold; margin: .6em 0; } .oi-li-desc { font-size: 12px; font-weight: normal; margin: -.5em 0 .6em; }
update:
if have chrome installed can right click example page here: http://jsfiddle.net/7bn2z/49/ , inspect element. can see jqm adds of css
so in example start off with:
<ol data-role="listview"> <li> <h3>heading</h3> <p>description</p> </li> </ol>
and jqm adds it's tags this:
<ol data-role="listview" class="ui-listview"> <li class="ui-li ui-li-static ui-body-c"> <h3 class="ui-li-heading">heading</h3> <p class="ui-li-desc">description</p> </li> </ol>
Comments
Post a Comment