New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker May 12, 2011

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.

Contributor

toddparker commented May 12, 2011

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

This comment has been minimized.

Show comment
Hide comment
@phillpafford

phillpafford May 12, 2011

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

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker May 12, 2011

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.

Contributor

toddparker commented May 12, 2011

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

This comment has been minimized.

Show comment
Hide comment
@ryanneufeld

ryanneufeld Jul 19, 2011

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 :(

Member

ryanneufeld commented Jul 19, 2011

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Jul 19, 2011

Contributor

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

Contributor

toddparker commented Jul 19, 2011

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

@ryanneufeld

This comment has been minimized.

Show comment
Hide comment
@ryanneufeld

ryanneufeld Jul 19, 2011

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/

Member

ryanneufeld commented Jul 19, 2011

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

This comment has been minimized.

Show comment
Hide comment
@ryanneufeld

ryanneufeld Jul 19, 2011

Member

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

Member

ryanneufeld commented Jul 19, 2011

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

@ryanneufeld

This comment has been minimized.

Show comment
Hide comment
@ryanneufeld

This comment has been minimized.

Show comment
Hide comment
@ryanneufeld

ryanneufeld Jul 19, 2011

Member

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

Member

ryanneufeld commented Jul 19, 2011

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

@ryanneufeld

This comment has been minimized.

Show comment
Hide comment
@ryanneufeld

ryanneufeld Jul 19, 2011

Member

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

Member

ryanneufeld commented Jul 19, 2011

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

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Jul 19, 2011

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.

Contributor

toddparker commented Jul 19, 2011

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

This comment has been minimized.

Show comment
Hide comment
@ryanneufeld

ryanneufeld Jul 19, 2011

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

Member

ryanneufeld commented Jul 19, 2011

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

This comment has been minimized.

Show comment
Hide comment
@ryanneufeld

ryanneufeld Jul 19, 2011

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.

Member

ryanneufeld commented Jul 19, 2011

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

This comment has been minimized.

Show comment
Hide comment
Member

ryanneufeld commented Sep 28, 2011

@ghost ghost assigned jaspermdegroot Jul 5, 2012

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Feb 27, 2013

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;
}
Member

jaspermdegroot commented Feb 27, 2013

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