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

Closed
phillpafford opened this Issue May 12, 2011 · 15 comments

Projects

None yet

4 participants

@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
Contributor

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.

@toddparker toddparker closed this May 12, 2011
@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
Contributor

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
Member

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
Contributor

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

@ryanneufeld
Member

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
Member

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

@ryanneufeld
Member

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

@ryanneufeld
Member

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

@toddparker
Contributor

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.

@toddparker toddparker reopened this Jul 19, 2011
@ryanneufeld
Member
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
Member

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.

@ryanneufeld
Member
@jaspermdegroot
Member

Possible fix:

ol.ui-listview .ui-li-heading {
   display: inline-block;
   width: 100%;
   margin-left: -1.3em;
   text-indent: 1.3em;
   vertical-align: middle;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment