Contrib.social

field class adds height to field div - reason unknown?

Open on Drupal.org →
Created on 12 November 2023, over 1 year ago
Updated 27 June 2024, 9 months ago

This has me scratching my hair, I spent one hour on this problem without finding the cause.

I'm using an image paragraph, which produces the following code:

<div class="w3-row p-container paragraph paragraph--type--images paragraph--view-mode--default paragraph--id--57">
  <div id="w3-default-57" class="w3-row p-container-inner">
      <div class="w3-row field field--name-field-images-demo field--type-image field--label-hidden field__items">
            <div class="field__item">
                <img loading="lazy" src="/sites/default/files/leistungen_aku_0.jpg" width="662" height="655" alt="" class="w3-image">
            </div>
          </div>
    </div>
</div>

And I noticed the container is larger than the image, precisely the div that has the "field" class, two levels above the img, is higher than the image, while the div with class "field__item" correctly has the same size as the img.

I inspected the box model, and there is nothing, no padding, no margins.

Then I started to manually remove css in developer mode, but I was unable to remove the extra height, but I noticed that changing the body's font size changed the height of the blank gap.

Again, I could not discover any paddings, margins or height settings affecting the box model.

Then, on a hunch, I experimented with taking css classes away.

And the "field" class did it. After removal of this class, there were no more height problems.

In this theme, the core field template is overridden by /templates/field/field--image.html.twig where the "field" class is added.

I used agent ransack to inspect all files involving the "field" class, possible javascript alterations using has_class, etc. nothing.

I'm reporting this for 2 reasons:
- I believe no extra height should be added, so this would be a minor bug
- I would like to understand where the extra height comes from

💬 Support request
Status

Closed: outdated

Version

2.0

Component

Code

Created by

drupaldope

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @drupaldope
  • Comment over 1 year ago →
    drupaldope
  • Comment over 1 year ago →
    drupaldope
  • Comment over 1 year ago →
    🇺🇸United States flashwebcenter Austin TX

    Hello,
    The code you have is not for the image field bundle. It uses the default bundle "w3-default-57". Enable the twig debugging mode and check which template is being used. Here is the code for the image bundle.
    If you have a link, I will inspect it.

    <div id="w3-image-747" class="contextual-region w3-row p-container paragraph paragraph--type--w3css-image paragraph--view-mode--default paragraph--id--747">
  <div class="w3-row p-container-inner">
    <h3 class="content-title">
      <!-- THEME DEBUG -->
      <!-- THEME HOOK: 'field' -->
      <!-- FILE NAME SUGGESTIONS:
   * field--paragraph--w3css-content-title--w3css-image.html.twig
   * field--paragraph--w3css-content-title.html.twig
   * field--paragraph--w3css-image.html.twig
   * field--w3css-content-title.html.twig
   * field--string.html.twig
   x field.html.twig
-->
      <!-- BEGIN OUTPUT from 'themes/contrib/d8w3css/templates/field/field.html.twig' -->
      <div class="w3-row field field--name-w3css-content-title field--type-string field--label-hidden w3-bar-item field__item">Title</div>
      <!-- END OUTPUT from 'themes/contrib/d8w3css/templates/field/field.html.twig' -->
    </h3>
    <div class="w3-row w3-img-wrapper  w3-dis-top-left-right ">
      <!-- THEME DEBUG -->
      <!-- THEME HOOK: 'field' -->
      <!-- FILE NAME SUGGESTIONS:
   * field--paragraph--w3css-content-image--w3css-image.html.twig
   * field--paragraph--w3css-content-image.html.twig
   * field--paragraph--w3css-image.html.twig
   * field--w3css-content-image.html.twig
   * field--entity-reference.html.twig
   x field.html.twig
-->
      <!-- BEGIN OUTPUT from 'themes/contrib/d8w3css/templates/field/field.html.twig' -->
      <div class="w3-row field field--name-w3css-content-image field--type-entity-reference field--label-hidden w3-bar-item field__item">
        <!-- THEME DEBUG -->
        <!-- THEME HOOK: 'media' -->
        <!-- FILE NAME SUGGESTIONS:
   * media--source-image.html.twig
   * media--w3css-media-image--w3css-media-view-image.html.twig
   * media--w3css-media-image.html.twig
   * media--w3css-media-view-image.html.twig
   x media.html.twig
-->
        <!-- BEGIN OUTPUT from 'core/modules/media/templates/media.html.twig' -->
        <div class="contextual-region">
          <div data-contextual-id="media:media=51:changed=1639577890&amp;langcode=en" data-contextual-token="e4rq2HDbryQZsol3w-3tFCv8OdVbQQ7IpCf_TZBz4zM" data-drupal-ajax-container="" data-once="contextual-render" class="contextual">
            <button class="trigger focusable" type="button" aria-pressed="false">Open configuration options</button>
            <!-- THEME DEBUG -->
            <!-- THEME HOOK: 'links__contextual' -->
            <!-- FILE NAME SUGGESTIONS:
   * links--contextual.html.twig
   x links.html.twig
-->
            <!-- BEGIN OUTPUT from 'themes/contrib/d8w3css/templates/navigation/links.html.twig' -->
            <ul class="contextual-links w3-ul ul-0" hidden="" data-once="body">
              <li class="w3-left w3-small li-0" data-once="ul">
                <a href="/media/51/edit?destination=/node/211">Edit</a>
              </li>
              <li class="w3-left w3-small li-0" data-once="ul">
                <a href="/media/51/delete?destination=/node/211">Delete</a>
              </li>
            </ul>
            <!-- END OUTPUT from 'themes/contrib/d8w3css/templates/navigation/links.html.twig' -->
          </div>
          <!-- THEME DEBUG -->
          <!-- THEME HOOK: 'field' -->
          <!-- FILE NAME SUGGESTIONS:
   * field--media--w3css-media-image--w3css-media-image.html.twig
   * field--media--w3css-media-image.html.twig
   * field--media--w3css-media-image.html.twig
   * field--w3css-media-image.html.twig
   x field--image.html.twig
   * field.html.twig
-->
          <!-- BEGIN OUTPUT from 'themes/contrib/d8w3css/templates/field/field--image.html.twig' -->
          <div class="w3-row field field--name-w3css-media-image field--type-image field--label-visually_hidden">
            <label class="field__label visually-hidden">Image</label>
            <div class="field__item">
              <!-- THEME DEBUG -->
              <!-- THEME HOOK: 'image_formatter' -->
              <!-- BEGIN OUTPUT from 'core/modules/image/templates/image-formatter.html.twig' -->
              <!-- THEME DEBUG -->
              <!-- THEME HOOK: 'image' -->
              <!-- BEGIN OUTPUT from 'themes/contrib/d8w3css/templates/field/image.html.twig' -->
              <img loading="lazy" src="/sites/w3css/files/w3css-media-image/2021-12/w3css_paragraphs_a_6_1.jpg" width="750" height="350" alt="a6" class="w3-image">
              <!-- END OUTPUT from 'themes/contrib/d8w3css/templates/field/image.html.twig' -->
              <!-- END OUTPUT from 'core/modules/image/templates/image-formatter.html.twig' -->
            </div>
          </div>
          <!-- END OUTPUT from 'themes/contrib/d8w3css/templates/field/field--image.html.twig' -->
        </div>
        <!-- END OUTPUT from 'core/modules/media/templates/media.html.twig' -->
      </div>
      <!-- END OUTPUT from 'themes/contrib/d8w3css/templates/field/field.html.twig' -->
    </div>
  </div>
</div>
  • Comment over 1 year ago →
    drupaldope

    Yes, I use Twig debug, but the site is on my development machine.

    Here is the code:

    <!-- THEME DEBUG -->
<!-- THEME HOOK: 'paragraph' -->
<!-- FILE NAME SUGGESTIONS:
   * paragraph--images--default.html.twig
   * paragraph--images.html.twig
   x paragraph--default.html.twig
   * paragraph.html.twig
-->
<!-- BEGIN OUTPUT from 'modules/contrib/w3css_paragraphs/templates/paragraph--default.html.twig' -->
<div class="w3-row p-container paragraph paragraph--type--images paragraph--view-mode--default paragraph--id--57">
  <div id="w3-default-57" class="w3-row p-container-inner">       
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'field' -->
<!-- FILE NAME SUGGESTIONS:
   * field--paragraph--field-images-demo--images.html.twig
   * field--paragraph--field-images-demo.html.twig
   * field--paragraph--images.html.twig
   * field--field-images-demo.html.twig
   x field--image.html.twig
   * field.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/contrib/d8w3css/templates/field/field--image.html.twig' -->
      <div class="w3-row field field--name-field-images-demo field--type-image field--label-hidden field__items">
              <div class="field__item">
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'image_formatter' -->
<!-- BEGIN OUTPUT from 'core/modules/image/templates/image-formatter.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'image' -->
<!-- BEGIN OUTPUT from 'themes/contrib/d8w3css/templates/field/image.html.twig' -->
<img loading="lazy" src="/sites/default/files/leistungen_aku_0.jpg" width="662" height="655" alt="" class="w3-image">
<!-- END OUTPUT from 'themes/contrib/d8w3css/templates/field/image.html.twig' -->
<!-- END OUTPUT from 'core/modules/image/templates/image-formatter.html.twig' -->
</div>
          </div>
<!-- END OUTPUT from 'themes/custom/d8w3css_subtheme/templates/field/field--image.html.twig' -->
  </div>
</div> 
<!-- END OUTPUT from 'modules/contrib/w3css_paragraphs/templates/paragraph--default.html.twig' -->
  • Comment over 1 year ago →
    🇺🇸United States flashwebcenter Austin TX

    When you add an image with the w3css image you will be using the image template, but you are using the default. It looks like it was deleted or replaced.

    Best wishes,
    Alaa

  • Comment over 1 year ago →
    drupaldope

    Thank you Alaa.
    Where does the additional height come from, though ?
    I couldn't find any CSS applied to the 'field' class.

  • Comment over 1 year ago →
    🇺🇸United States flashwebcenter Austin TX

    Not sure, I will need a link to inspect and check which template is used with w3css_image.
    Best wishes,
    Alaa

  • Status changed to Closed: outdated over 1 year ago
  • Comment over 1 year ago →
    🇺🇸United States flashwebcenter Austin TX
  • Comment 9 months ago →
    🇺🇸United States flashwebcenter Austin TX
contrib.social Blog FAQ Discussions
Production build 0.71.5 2024