2

I have 2 blocks sitting in a region called "headline".

Drupal 8 seems to add these 2 blocks , into an unnamed div and thus their display:flex CSS layout is cancelled (you can't scatter 2 container items if these are wrapped into one div).

  • Please see attached image to make sure you understand me.

I have no idea where this inspected div is coming from. I don't recall adding it myself. Only because it seems to be added by Drupal 8 itself, I publish this question here.

The problem can be seen live here.

A Drupal 8 themer might have an idea on why this is happening.

I might need to note that the twig markup also doesn't contain such div.

The regions' twig markup:

<div id="headline">
<div class="container">
{% if page.headline %}
     {{ page.headline }}
{% endif %}
</div>
</div>

The CSS code I used:

#headline . container {display: flex; flex-direction: column; align-items: center}

@media screen and (min-width: 1080px) {

#headline .container {display: flex; flex-direction: row; justify-content: space-between; align-content: flex-start; flex: 1; margin: 0 auto}

}

enter image description here

3

Checkout Twig Debug to see where the template is coming from.

https://www.drupal.org/docs/8/theming/twig/locating-template-files-with-debugging

https://sqndr.github.io/d8-theming-guide/twig/twig-debug.html

It will wrap the template with HTML comments telling you where to find it relative to the website root.

Some of the <div> tags provide containers for applying attributes to for things like contextual links and quick edit, so be cognizant of that when removing them when they have {{ attributes }} printed in them. Those CSS class attributes and data attributes are only are filled when those modules are enabled.

4

It could be coming from region.html.twig:

https://api.drupal.org/api/drupal/core%21modules%21system%21templates%21region.html.twig/8.2.x

0
-2
{% if content %}
  <div{{ attributes }}>
    {{ content }}
  </div>
{% endif %}

{% if content %}
  <div{{ attributes != '' }}>
    {{ content }}
  </div>
{% endif %}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy