0

I'm trying to override the views-view-unformatted.html.twig template by an unformatted view that includes a hidden Grouping field.

The default template includes this code:

{% if title %}
  <h3 class="group-title">{{ title }}</h3>
{% endif %}
{% for row in rows %}
  {%
    set row_classes = [
      default_row_class ? 'views-row',
    ]
  %}
  <div{{ row.attributes.addClass(row_classes) }}>
    {{- row.content -}}
  </div>
{% endfor %}

When I copy the default template into my theme, this generates the results I would expect:

enter image description here

When I try to modify the code by wrapping a div around the loop that fetches the rows, like this:

{% if title %}
  <h3 class="group-title">{{ title }}</h3>
{% endif %}
<div class="group-content">
{% for row in rows %}
  {%
    set row_classes = [
      default_row_class ? 'views-row',
    ]
  %}
  <div{{ row.attributes.addClass(row_classes) }}>
    {{- row.content -}}
  </div>
{% endfor %}
</div>

I get this output instead:

enter image description here

Note that the first two rows are wrapped in the group-content div, whilst the third row is now wrapped in a separate group-content div. There should obviously be only one group-content div, with all rows inside it.

My goal in overriding the default template is to put them all in a separate div, which I can't do from within the views settings, so the fact that overriding the template isn't working defeats the object of the exercise.

Any ideas why this is happening, and how to get around it?

  • The template looks correct. The screenshots are from the browser developer console though. Browsers fix invalid HTML source (e.g. a missing closing tag) by themselves, so the markup you are seeing there is not the real, rendered one. Check the real, unformatted source code (Ctrl+U in Chrome), I guess there is wrong markup in one of the inner, nested template files. – Hudri Aug 17 '18 at 8:16
  • If you turn twig debugging on (drupal.org/docs/8/theming/twig/debugging-twig-templates) then you should be able to see where the broken HTML is coming from if you look at the source of your page carefully. – Alfred Armstrong Aug 17 '18 at 9:47
  • 1
    Did you check tag div in your template? I saw missing closing tag div after {% endfor %} – MrD Aug 17 '18 at 10:56
  • Well spotted! Last '<div>' should be '</div>'. – Alfred Armstrong Aug 17 '18 at 11:15
  • Sorry - the closing <div> was a typo in the post, not the template. I've corrected it in the post. – millionleaves Aug 17 '18 at 19:05
2

count opening and closing tag div

0

Problem solved. Thanks to everyone who commented. Turns out the issue was that one node being returned in the view didn't have the grouping field set. This only became a problem once I added the extra div around the rows output.

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.