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

  • I don't have such a file in my theme (Basic). I tried to add it and delete the div it addes under if-content. No change after cache flush. – JohnDoea Sep 26 '16 at 3:04
  • The template is inherited, it doesn't need definition in the theme. You would override that template and remove the div. – Kevin Sep 26 '16 at 3:43
  • Blocks also have template wrappers. Beyond that it could be a bug in Basic. – Kevin Sep 26 '16 at 3:47
  • Careful removing elements with {{ attributes }} as they may be used for quick edit or contextual links of maybe other modules you have are using them to inject attributes. – joelpittet Sep 26 '16 at 6:52
0
{% if content %}
  <div{{ attributes }}>
    {{ content }}
  </div>
{% endif %}

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

It was my mistake not to check what is the core-theme and what is taken from its twig that caused it.

My base theme is Basic and the core theme is Stable (this info is available in the .info.yml file of any theme).

The file with problematic directives was region.html.twig. This file sits under root/core/themes/stable/layout and should be copied to the subthemes' templates folder and customize this copied version of it.

I copied that file to my sub-theme's folder, and there changed:

{% if content %}
  <div{{ attributes }}>
    {{ content }}
  </div>
{% endif %}

To:

{% if content %}
    {{ attributes }}
    {{ content }}
{% endif %}

The particular div no longer appear.

Note for newcomers:

It is best to read other answers in this post.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.