Problem/Motivation
Postponed on #3113211: Create test for theme asset decoupling from Stable and address any regressions that decoupling may cause
Core includes the following rule for .container-inline
.container-inline div,
.container-inline label {
display: inline-block;
}This rule hadn't reached Umami as the Stable theme has a version of this styling with it set to display: inline; instead.
In this issue #3113211: Create test for theme asset decoupling from Stable and address any regressions that decoupling may cause, core themes no longer inherit assets from Stable. This meant that Umami got the display: inline-block; rule instead of display: inline;, which resulted in at least one regression:

(note that the search block is fine, which is the only non-admin use of .container-inline that comes to mind, but there may be others)
To prevent this regression, a rule was added to Umami's base.css with a @todo pointing to this issue
The issue #2226317: Divs in the container-inline wrapper should be inline-block instead of inline, which first made the changes, explains why there was interest in changing this rule. Umami's maintainers can determine if it's preferable to address the regressions and inherit the
.container-inline div, .container-inline label
from core, or simply keep the rule added in #2226317.
Proposed resolution
Determine if it is best to inherit the display: inline-block; style from core, or keep the display: inline; style added in #3113211
Remaining tasks
If changing the style seems unnecessary, just remove the @todo comments referencing this issue. If it would be beneficial, remove the @todo comments and the CSS accompanying it, and fix any regressions.
User interface changes
API changes
Data model changes
Release notes snippet
| Comment | File | Size | Author |
|---|---|---|---|
| #6 | umami-inline-radios.PNG | 4.18 KB | neograph734 |
Comments
Comment #2
bnjmnmComment #3
bnjmnmComment #4
xjmThe blocker is in.
Comment #5
xjmComment #6
neograph734I have discovered issues with RTL display of inline radio buttons when using
display: inline.display: inline-blocksolves this. Please see #2912824: Inappropriate trailing colons in Claro and Umami.When attempting to test that patch with Umami it appeared that this theme has no great support for inline elements anyway, as every input element has a minimum width of 100%.
If you change the width into something smaller, one can see the items switch place in RTL languages as described in the linked issue.
I recommend using
display: inline-block.