Closed
Bug 1161825
Opened 10 years ago
Closed 10 years ago
Ordered list displays count as 0 when using display: flex or display: inline
Categories
(Core :: Layout, defect)
Core
Layout
Tracking
()
People
(Reporter: bholtbholt, Unassigned)
Details
Attachments
(3 files)
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:37.0) Gecko/20100101 Firefox/37.0
Build ID: 20150415140819
Steps to reproduce:
I have an ordered list element which contains 3 list items. The ordered list is display: flex and the list items have no specified order, which causes them to show up as "0" instead of "1-3".
<ol>
<li>first</li>
<li>second</li>
<li>third</li>
</ol>
ol {
display: flex; /* or inline also causes this error */
}
ol li {
flex: 1 0 auto;
list-style: inside none decimal;
}
Actual results:
List elements appear as 0. instead their correct number.
Expected results:
List elements should have incremented.
Reporter | ||
Comment 1•10 years ago
|
||
Workaround is to specify the count.
ol {
display: flex; /* or inline also causes this error */
counter-reset: level1;
}
ol li {
flex: 1 0 auto;
list-style: none;
}
ol li:before {
content: counter(level1) ". ";
counter-increment: level1;
}
Comment 2•10 years ago
|
||
Comment 3•10 years ago
|
||
Comment 4•10 years ago
|
||
Chrome (Blink) & Opera 12.16 (Presto) give expected results (numbering the list entries as 1,2,3).
Firefox Nightly numbers the list entries 0,0,0. Not sure why offhand.
Status: UNCONFIRMED → NEW
Component: Untriaged → Layout
Ever confirmed: true
Version: unspecified → Trunk
Comment 5•10 years ago
|
||
Bug 4522 may be related, but in general the issue is that the list-numbering logic all lives in blockframe, no?
Comment 6•10 years ago
|
||
I'm not sure. We get it right if I make the <ol> "display:table", and we've got approximately the same block involvement with a table-<ol> vs. a flex-<ol>. So there's apparently some way to get this working with non-block <ol>.
(Technically tables will give us a layer of blockification for the anonymous table-cell; I thought maybe that block was helping for tables. But if I add a similar block around each <li> or around all of the <li>'s and use display:flex, stuff's still broken.)
Comment 7•10 years ago
|
||
Ah, but as bz points out on IRC: in the "display:table" case, the anonymous block frame (for the cell contents) has its mContent pointer set to the <ol> content-node, so it does list numbering.
Whereas, with "display:flex" and an explicit <div> around the <li> elements, that explicit <div> block does *not* have its mContent set to the <ol> content-node. (it's set to the <div>). So, no list numbering.
So yeah, looks like a dupe of bug 4522.
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → DUPLICATE
Comment 8•10 years ago
|
||
Ah yes, and this was filed (for flexbox) a few months ago as bug 1129490. I thought it rang a bell, but I didn't search with the right terms to find that bug. :)
You need to log in
before you can comment on or make changes to this bug.
Description
•