1228696 - ul list may put 2 li list items on one line

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Nick Levinson]

An unordered list displays two items on the same line, when they should be separate, like the rest of the list. This is in Firefox but not in Chromium on the same platform and viewing the same page (or any of most pages) hosted by the same host (the host has multiple servers but if that was the problem then the display problem should have moved between browsers). In FF, it is only in relatively narrow viewport widths (1299px or less) and only for two particular list items ("L.L.Bean" and "Eastern Mountain Sports (EMS)") in a three-item list and not in other lists.

Firefox 42.0 for OpenSuse 13.2; Chromium 46.0.2490.86 (64-bit).

Comment 1

[Andre Klapper]

Please provide a minimal, self-contained testcase for this problem.

Comment 2

[Nick Levinson]

Attachment: Screenshot.

Comment 3

[Nick Levinson]

A screenshot is attached or about to be. The problem is visible in the middle of the image. I don't know what you mean about a testcase for this situation, so I hope this illustrates the problem, but in case you need more I'm leaving the needinfo flag up for someone else to remove if appropriate.

However, the bug turns out to be in Responsive Design View (I didn't know that before today). If I don't use that, but use the restore/maximize button in the browser window's top right corner (represented by a small box next to the close "x" button) to demaximize to whatever size the window goes to, and Responsive Design View is off, the problem doesn't happen. But with Responsive Design View the problem occurs whether the window is maximized or not. Therefore, I'm changing the Component for this bug report.

By the way, the original poster (reporter) is always on the CC list, as far as I know.

Comment 4

[Nick Levinson]

More info: Width matters unexplainably. The erroneous single-line layout occurs only when the viewport width is 1091-1299px, but my surrounding breakpoints in /CSS/main.css are at 665-666px and 1299-1300px. The list is in a columnar layout and the column count (per column-count, -moz-column-count, and -webkit-column-count) is 3 above and below 1091px. The height didn't matter within the range I could test, 50-570px. I don't set CSS by viewport height.

Comment 5

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

There is a rule:

@media screen and (max-width:1599px) and (min-width:1300px) {
  li.resource-websites {
    display: inline-block;
  }
}

this seems to be what triggers multiple elements in a line.  

Anyway, I can reproduce by resizing the window manually, so let's move this to Layout, since I am not certain that is the cause.

Comment 6

[Nick Levinson]

Commenting-out "display: inline-block;" (and leaving padding, height, min-width< and break-before intact) cured the problem but introduced list item markers and caused a long list item to overlap the next item. At any rate, the full rule is needed for touch-screen compatibility, and it shouldn't be allowed to cause this difficulty.

New clues:

Those two list items are the shortest texts in the list. They're the only ones in that list that would fit on one line in the column at the usual viewport widths, so maybe the browser would put all of the li items on one line if there was enough width to hold them. So it doesn't depend on the particular items other than that they're narrow.

Also, the column width matters. By CSS, different viewport width ranges correlate with different column counts. So, the two li items fit on one line when the column count is only three but if the viewport width widens until suddenly there are four columns the result is that each column gets suddenly narrower as the viewport gets gradually wider. The narrowing of the column causes the two list items to stop sharing one baseline.

Since the screen shot above, I added "break-before: always;" to the selector for the viewport widths in question. I since added it for every viewport width. But that doesn't seem to matter for this bug.

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Looks like correct behavior to me.  inline-blocks are inline, which means that if more than one fits on a line, they should be placed on the same line.

Comment 8

[Nick Levinson]

I solved my problem by adding a br element after every li element (I tried switching to inline and to block but they made the layout worse).

Most users likely think of lists as ordinarily vertical, so this treatment of inline-block seems counterintuitive. But I'll leave this to other people to consider, and, if yours is the last word, that's good enough. Thanks.