0

I have a D8 site with a Bootstrap 3 subtheme and two columns with one region and a block inside each.

I need to change the first column width (col-md-12) to take 100% width when the view block in the second column is empty, and to take just 50% (col-md-6) when it has something to display.

An easy way to achieve this without custom modules?

With this solution I can hide the second region, but how to make the regions talk together and change the first accordingly? Should I make one single region with two blocks within and then change column classes in the region twig template? Is it possible?

Thanx for your attention

0

One way to solve your problem is to implement an hook_preprocess() in your custom themes' .theme file, where you check whether your second block is empty or not and use this information to apply the appropriate (Bootstrap grid) class (to your block in the first column).

Although above suggestion is not using a custom module (it's in your sub-theme), however, I can imagine that this might not be the answer you're looking for.

As you suggest you can also put this logic in your Twig template, but checking whether your block is empty can be a bit troublesome (due to the fact that blocks can be lazy loaded using placeholders, see e.g. Drupal 8 regions with and empty blocks).

  • Thank you anyway. I'm an old D7 user, but an early D8 adopter, so I'm not good enough to code the D8 way... Not yet... Probably I can bypass this problem from a client point of view, trying to achieve the auto layout column of Bootstrap 4 in Bootstrap 3... Thank you again... – Cheope Mar 16 '18 at 21:53
0

I solved putting the logic in my twig template using this construct to check if the view block is empty:

{% if page.myregion|render|striptags|trim|length > 0 %}

I also had to uncheck "show title" in the block configuration to make it work.

Thanx for the suggestions :-)

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.