Page MenuHomePhabricator

mw-collapsible in list items is inconsistent with both divs and tables
Open, Needs TriagePublic

Description

There is a use case on en.wp that has a collapsible list inside a collapsible list (WPVG new article announcements archives). This is implemented with Template:Collapsible list inside another T:Collapsible list. I recently updated it from NavFrame to use mw-collapsible. In the conversion, an unexpected change happened where the toggle started not floating on the second level list. This is due to the following CSS (and a couple more lines):

/* list-items go as wide as their parent element, don't float them inside list items */
li .mw-collapsible-toggle,
.mw-content-ltr li .mw-collapsible-toggle,
.mw-content-rtl li .mw-collapsible-toggle,
.mw-content-ltr .mw-content-rtl li .mw-collapsible-toggle,
.mw-content-rtl .mw-content-ltr li .mw-collapsible-toggle {
 float:none
}

It's been like this since originally committed in 2010 by Krinkle.

This is different behavior than either div or table. Divs float all the way to the right... while table captions (or cells where no caption exists) are snug with the text element.

It would be nice for list items to do one or the other of those two. The rationale for list items acting differently than divs doesn't fundamentally make sense to me (they're both block level elements so the float goes to the far right in both cases), but even acting like tables would be preferable...

Event Timeline

having the toggle on the other side of the page is annoying for lists, so that's why. It doesn't know that people sometimes wrap a list inside a div, so a choice was made.
See the demo on https://www.mediawiki.org/wiki/Manual:Collapsible_elements/Demo/Advanced

Technically, I think the alignment of the toggle might have to be split off into a separate class. En.wp also has .mw-collapsible-leftside-toggle for instance to override the positioning of a toggle on a table/div in some cases.

having the toggle on the other side of the page is annoying for lists, so that's why.

Div does the same thing. Div's toggle is also off the way to the right.