• heading

    description...">

    Geek asks and answers

    How to create a mobile ordered jquery list with list characters set to external?

    <ol data-role="listview">
    <li>
        <h3>heading</h3>
        <p>description</p>
    </li>
</ol>

    Result:

       1.
   Heading 
   Description

    I want to:

        1.    Heading
          Description

    I would think I could be stuck in a list-position style: outside as an inline style with a li tag. Bad luck. If I remove the listview data role, the style will be applied correctly.

    Something like the dateview role of the listview role handles styles, I can’t understand how though ... I searched for the position line in the list style in jQuery mobile css and js files and no results were returned, what happens here?

    Can anybody help?

    PS. using jquery mobile 1.0a4.1

    +3
    source share
    2 answers

    It looks like you need to add some custom CSS

    Live : http://jsfiddle.net/7Bn2z/43/ Live # 2: http://jsfiddle.net/7Bn2z/48/ ( )

    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:

    , : http://jsfiddle.net/7Bn2z/49/ . , jQM CSS

    , :

    <ol data-role="listview">
    <li>
        <h3>heading</h3>
        <p>description</p>
    </li>
</ol>

    jQM :

    <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>
    0

    jquery. Css :

      ol.ui-listview .ui-li-heading {
    display: inline-block;
    width: 100%;
    margin-left: -1.3em;
    text-indent: 1.3em;
    vertical-align: middle;
  }
    0

    More articles:


    All Articles