Custom <label> for <list-item> not displaying on the same line as item text

[pgoussy]

Describe the bug I noticed that when list items were assigned custom labels (e.g. "Q1", checkboxes, etc.), only the first item in the list would display the label properly. On all subsequent items, there was an unwanted line break inserted between the label and the actual item text.

Oddly enough, in the example linked/screenshotted below, the first list item contained a nested list, and that entire nested list was properly formatted. In every other item with a nested list, the nested list suffered from the same formatting issue (that is, the first item was correct and every subsequent one had a line break)

Janeway version 1.5.1

To Reproduce Steps to reproduce the behavior:

1. Go to https://journals.publishing.umich.edu/tia/plugins/typesetting/preview_galley/article/2343/galley/3628/
2. Observe difference in label placement between Q1, Q2, Q3, etc. (as well as the difference between the first nested list and all following nested lists)

Expected behavior Label for list item should display to the left of the item text on the same line.

Screenshots

XML from screenshot

<list-item><label>Q1.</label><p>Overall, how challenging was it for you to convert your fall courses to a blended format?
<list list-type="simple">
<list-item><label>&#xF0A1;</label><p>Extremely easy</p></list-item>
<list-item><label>&#xF0A1;</label><p>Somewhat easy</p></list-item>
<list-item><label>&#xF0A1;</label><p>Neither easy nor difficult</p></list-item>
<list-item><label>&#xF0A1;</label><p>Somewhat difficult</p></list-item>
<list-item><label>&#xF0A1;</label><p>Extremely difficult</p></list-item>
</list></p></list-item>
<list-item><label>Q2.</label><p>Prior to Spring 2020, had you taught:
<list list-type="simple">
<list-item><label>&#xF0A1;</label><p>Fully online course(s)</p></list-item>
<list-item><label>&#xF0A1;</label><p>Hybrid course(s) (a blend of online and face-to-face experiences)</p></list-item>
<list-item><label>&#xF0A1;</label><p>Both of the above</p></list-item>
<list-item><label>&#xF0A1;</label><p>Only face-to-face classes</p></list-item>
</list></p></list-item>
<list-item><label>Q3.</label><p>Did you review and/or complete any portion of the blended learning [LMS] course?
<list list-type="simple">
<list-item><label>&#xF0A1;</label><p>Yes</p></list-item>
<list-item><label>&#xF0A1;</label><p>No</p></list-item>
</list></p></list-item>
<list-item><label>Q4.</label><p>What limited your participation in the course? (check all that apply)
<list list-type="simple">
<list-item><label>&#xF0A8;</label><p>I didn&#x2019;t have the time</p></list-item>
<list-item><label>&#xF0A8;</label><p>I didn&#x2019;t need the support</p></list-item>
...```

[ajrbyers]

@pgoussy do the list items contain paragraph tags at all?

[pgoussy]

@pgoussy do the list items contain paragraph tags at all?

Yes they do! I've added a code snippet to the ticket above.

[ajrbyers]

@pgoussy do the list items contain paragraph tags at all?

Yes they do! I've added a code snippet to the ticket above.

Why on earth JATS required a <list-item> to contain a <p> tag is totally beyond me.

[StephDriver]

TLDR: This is caused by the paragraph tag being display: block rather than display: inline and there being an override to put it to display: inline that specifically applies to the first child of the list, so that all the rest default to block.

So to discuss at backlog refinement: Why does only the first child have that override?

Also, this seems to be about it all being a .no-list-type list. Is there a different list class that should have been used because this class is intended to have this behaviour?

---

Investigation:

Considering this example:

The HTML is identical.

<ul class="list-simple">
  <li class="no-list-type">
    <span class="jats-list-type"></span>
    <p>Yes</p>
  </li>
  <li class="no-list-type">
    <span class="jats-list-type"></span>
    <p>No</p>
  </li>
</ul>

But the CSS is different, for example the display for "yes" is inline and the "no" is block. When overriding this to display: inline; the problem goes away.

But why would the second one be block?

The block style is coming from the paragraph. But both have paragraph tags. The first item in the list, has an override from common.css:271

.no-list-type:first-child p {
    display: inline;
}

NB. As the override is for the first child, and this is a nested list all with the same class, this also explains why Q1 is unaffected, as it is the first child of the outer list, and so the override has been applied to everything within that child (ie. all children of Q1) even though for its siblings, e.g. Q2, it will only apply to their first child.

[ajrbyers]

Great catch @StephDriver !