duplicates #2679775: Inline labels in classy theme do not clear floats

For Classy and Classy-based themes (sub-themes of Classy), when setting a field label to 'Inline', we use 'float: left' for the .field__label class. If the content of the fields is very short, this leaves room for subsequent fields to also float up beside the inline field.

Steps to reproduce:

  • Create two new fields
  • Allow these fields to be multivalue
  • set the labels to inline on the 'Manage Display' page
  • Add one word of content to each field
  • The fields will display inline to each other, rather than just their parent.

See this screenshot:
inline field label causing subsequent fiels to float left

The expected behaviour would be that only the field(s) related to that label would float, like so:
expected behaviour of an inline label

If we add a 'clearfix' class to the field when it has a label set, this will fix this issue. I"ll attach a patch in the comments.

CommentFileSizeAuthor
#13 add-overflow-hidden-if-field-label-is-visible-285007-13.patch438 bytesmarkconroy
#3 add-clearfix-if-field-label-is-visible-2850075-3.patch553 bytesmarkconroy
expected-behaviour.png31.61 KBmarkconroy
subsequent-fields-floating.jpg57.67 KBmarkconroy

Comments

markconroy created an issue. See original summary.

markconroy’s picture

markconroy commented
Component: CSS » Classy theme
Issue summary: View changes
markconroy’s picture

markconroy commented
Version: 8.2.6 » 8.2.x-dev
StatusFileSize
new add-clearfix-if-field-label-is-visible-2850075-3.patch553 bytes

Adding patch.

markconroy’s picture

markconroy commented
Status: Active » Needs review

Setting status to 'needs review'

markconroy’s picture

markconroy commented
Issue summary: View changes
teemuaro’s picture

teemuaro commented
Status: Needs review » Reviewed & tested by the community

Bug reproduces nicely, patch applies cleanly and fixes the problem.

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
commented
Version: 8.2.x-dev » 8.3.x-dev
Status: Reviewed & tested by the community » Needs work

8.2.x is only open for critical fixes.

The fix seems a bit general no? I would have expected it to only add clearfix when the label is inlined.

markconroy’s picture

markconroy commented

Hi @alexpott,

It's is 'general', but at the same time if the label is not 'display inline', the clearfix won't matter. I can look at it again if you wish to only apply if the label is inline, but I think it'll result in messier looking code with {% if %} statements.

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
commented

@markconroy see the top of the file... we are already doing stuff like this...

{%
  set classes = [
    'field',
    'field--name-' ~ field_name|clean_class,
    'field--type-' ~ field_type|clean_class,
    'field--label-' ~ label_display,
  ]
%}
{%
  set title_classes = [
    'field__label',
    label_display == 'visually_hidden' ? 'visually-hidden',
  ]
%}

So we can add this to the classes variable... something like label_display == 'inline-or-whatever-this-is' ? 'clearfix',

markconroy’s picture

markconroy commented

Just adding client to the contribution list here - their first contribution (they are new to Drupal)

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
commented

I also wonder if we can't just add

.field--label-inline {
  display: table;
}

To core/themes/classy/css/components/field.css

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
commented
markconroy’s picture

markconroy commented
Status: Needs work » Needs review
StatusFileSize
new add-overflow-hidden-if-field-label-is-visible-285007-13.patch438 bytes 
.field--label-inline {
  overflow: hidden;
}

Should be fine. Patch attached.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

kay_v’s picture

kay_v commented
Status: Needs review » Closed (duplicate)

Marking this issue as the duplicate and pointing the effort to a more recently updated issue; note, however, that concerns raised in this issue may as yet be unaddressed in #2679775: Inline labels in classy theme do not clear floats.

kay_v’s picture

kay_v commented
Issue summary: View changes
Related issues: +#2679775: Inline labels in classy theme do not clear floats