Change Bootstrap column classes based on the result of a view

Question

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

Answer 1

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).

Answer 2

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 :-)