ordered list numbering, display is not correct when adding additional tags

[phillpafford]

Here is the thread/question: http://stackoverflow.com/questions/5969345/how-to-create-a-jquery-mobile-ordered-list-with-list-symbols-set-to-outside

The problem is the ordered list displays a number to the left of the elements except if you add another tag. This moves the new elements under the number instead of keeping it to the left.

So it looks like this:

1.
Heading 
Description

instead of this:

1.    Heading
      Description

[toddparker]

I think this is a case where you'd need to write some custom markup and CSS, like you're discussing in that stackoverflow article. Our CSS will get way to hard to manage if we try to cover every possible markup permutation so look at the standard list markup configurations as a starting point to show how to write markup and styles but you need to extend this as needed.

[phillpafford]

I couldn't get it to work myself as it seems that jQM doesn't use the ordered list numbering but adds them. So using this:

ul {
    list-style-position:outside;
}

doesn't work as expected.

Thanks for the quick response

[toddparker]

We actually try to use the native numbering if supported by a browser, then inject the numbers for browsers that can't support this.

[ryanneufeld]

I can't re-open this, but I will say that this worked fine pre beta1. Not sure what changed..

We have code in production that will need to be changed for this, and not in a pretty way :(

[toddparker]

What browser? These seem to work fine in latest:
http://jquerymobile.com/test/docs/lists/lists-ol.html

[ryanneufeld]

Not if you have more than one element inside.

If you use some markup like so:

<a href="/somelink">
    <img src="someimage.jpg" width="60" height="60" />

    <h3></h3>
    <p></p>
</a>

you end up with the number, with the text content below it. The image works fine.

http://jsfiddle.net/ryanneufeld/W9YHJ/

compared to alpha 4

http://m.metrolyrics.com/

[ryanneufeld]

Also, any modern browser I use it seems. iOS, or android

[ryanneufeld]

http://jsfiddle.net/ryanneufeld/W9YHJ/1/

[ryanneufeld]

Hrm
It appears it was working on alpha 3, not four.

[ryanneufeld]

Here is an example of what I was expecting vs how it seems to work

[toddparker]

Thanks for the test page. We use the native numbering if supported, then generate numbers programmatically if needed. This works in Chrome, so maybe the fallback isn't working on these browsers with this markup. We'll take a look.

[ryanneufeld]

ol.ui-listview .ui-link-inherit:before, ol.ui-listview .ui-li-static:before, .ui-li-dec { font-size: .8em; display: inline-block; padding-right: .3em; font-weight: normal;counter-increment: listnumbering; content: counter(listnumbering) ". "; }
ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid chance of duplication */

those lines of css seem to be the culprit... And I'm running chrome 13 and I see the same effect on all browsers. FF5, Chrome 13 and 14 :S

[ryanneufeld]

Submitted a pull request #2113

I think some additional ui-li-has-something classes could be used to further detect. At the very least some documentation on customizing this would be nice.