When choosing inline labels in "manage display," the classy theme (and template) attaches a "field--inline-label" class to the div that contains the inline field and label. Then, the inline label contains a class ".field--label-inline .field__label" that floats the label left.
However the enveloping div should include a "clearfix." Because clearfix is missing, any subsequent non-text fields will float up onto one line.
This bug can often be disguised if a field containing an inline label is a text field, since text fields automatically contain a clearfix, or when a field using an inline label is followed by a text field, since that clearfix will clear the float from the prior inline label.
NOTE: Since Bartik uses classy as a base theme, the problem occurs there as well.
Add a clearfix class to the div enclosing the field label and field contents in the template, OR
Create a ".field--label-inline" class for the div only, that will clear the label's float in "core\themes\classy\css\components\field.css"
| Comment | File | Size | Author |
|---|---|---|---|
| #19 | 2679775-19-clearfix_enclosing_label_and_contents.patch | 473 bytes | kay_v |
| #15 | rerolled-2679775-15.patch | 477 bytes | Vidushi Mehta |
| #11 | 2679775-after.png | 81.21 KB | mikeker |
| #11 | 2679775-before.png | 79.98 KB | mikeker |
| #11 | 2679775-11-inline-labels.patch | 475 bytes | mikeker |
Comments
Comment #2
darketaine commentedCould you upload a screenshot where that happens (wherever I see it it's combined with a clearfix class so I can't reproduce it)? In what field type?
There is a discussion that 'clearfix' should be removed anyway: #2544868: Discuss removing 'clearfix' class from Classy
So I guess there is no option to insert one more here (at least for now).
Comment #3
darketaine commentedSo, using Classy as default theme we have the first screenshot (Bartik "solves" this with a clearfix on specific fields).
In context of avoiding the clearfix logic some CSS was applied on 'field--label-inline'
Comment #4
darketaine commentedDid it again to be typically correct with the right element order.
Comment #5
zoon_unit commentedHere's an example of the issue, with a fix that I added in my custom css, replicating the clearfix class.
The first example comes from Bartik as the default theme. Bartik provides clearfix on text fields, but not on entity reference fields, so you can see the error. Several "non-text" fields have floated to the same line, due to the absence of a clear.
In the second example, I created a sub-theme of Bartik, thereby allowing me to add a "fixing css" file, where I added the clear.
Comment #6
john cook commentedI have applied the patch and it works as designed.
Before:
After:
Comment #7
catchComment #8
yesct commentedre-organized the issue summary with the issue summary template https://www.drupal.org/issue-summaries (I used https://dreditor.org/ issue summary button)
8.0.x is not open anymore, and 8.2.x is in beta https://groups.drupal.org/node/512705
but bug fixes are allowed in patch releases (8.1.x) https://www.drupal.org/core/d8-allowed-changes#beta
so changing version to 8.1.x
Comment #9
yesct commentedComment #10
star-szrThanks for this.
Making a change like this is a bit tricky IMO because some people might expect inline to not fill the "row" but from a site builder POV…I think the behaviour proposed here makes the most sense and themers can still override it if they do want to have multiple fields in a row, it is a bug that setting the label inline sets the entire field to inline. The fact that text fields clearfix already also helps. Having said that there is a risk for disruption so I think this would only be safe to commit to 8.3.x at this point.
My only gripe is minor about the placement of the code in the CSS file, it starts with
.field__labeland then the rest is all.field--label-inlineso can we move this new CSS below the first selector?Edit: Actually setting the field label to inline shouldn't mean that the entire field is inline, very important difference there, so edited above to reflect that.
Comment #11
mikeker commentedOK, I think this is where @Cottser wants the CSS...? I couldn't find anything in the CSS coding standards for ordering element vs modifier rules. Is there?
Before:
After:
Comment #13
mikeker commentedPatch in #11 still applies to 8.4.x without modification.
Comment #15
Vidushi Mehta commented#11 is failed to apply on 8.5.x so rerolled the patch.
Comment #17
kay_v commentedA solution proposed in the issue summary above is to "Add a clearfix class to the div enclosing the field label and field contents in the template." This proposal matches up with @alexpott's recommendation in a thread that duplicates this one (#2850075: When Setting Field Label to 'Inline', subsequent fields are affected by 'float: left;'). He gets more specific, recommending "only add[ing] clearfix when the label is inlined." Later in the same duplicate thread, Alex wonders whether it would be appropriate to take the approach taken in the last patch attached above (the second approach proposed in the issue summary above).
I agree with the first recommendation in each instance: adding
.clearfixto the container of label and contents complies with the Drupal standard that CSS "be abstracted out into a common reusable class." The approach in the latest patch creates a new style associated only with.field--label-inlinethat is a 1:1 repeat of.clearfix.Interested in others' review of that logic, of course.
Comment #18
kay_v commentedComment #19
kay_v commentedhere's a patch with the proposed change
Comment #20
adriancidI can confirm the problem and that the patch solves the problem.
Before:
After:
Comment #21
adriancidComment #23
kay_v commentedresetting to rtbc - the testbot comment above says tests failed, but viewing results shows all the tests passed.
Comment #25
alexpottAdding credit from duplicate issue.
Comment #26
alexpottAs per #10/@Cottser as this can only go into 8.6.x for fear of possible disruption - we should have a change record for themers here that states that inline field labels now have the clearfix class applied in classy.
Comment #29
vladimirausChange record added: https://www.drupal.org/node/3040758
Should we retro fit it for 8.7?
Comment #31
ytsurkYes, I definitely vote for a backport! But even more important to just make it in ;)
Comment #32
vladimirausChange record added as requested.
Comment #33
lauriiiCould someone add the steps that need to be taken to reproduce this?
Comment #34
vladimiraus@lauriii All steps in
Problem/Motivation.When choosing inline labels in
manage display, the classy theme (and template) attaches a.field--inline-labelclass to the div that contains the inline field and label. Then, the inline label contains a class.field--label-inline .field__labelthat floats the label left.Comment #37
lauriiiI couldn't reproduce this with Bartik. I created an empty theme that extended Classy and I could reproduce this.
Committed bffed55 and pushed to 9.0.x and 8.9.x. Thanks!
I don't think we should backport this to 8.8.x to minimize any regressions on patch releases.