How do I remove <div class="views-element-container form-group"> from output?

Question

I'm trying to theme the output of a Drupal 8 view to use via a token for email recipients of a YAML form. I'm on the latest Drupal 8 core release and using a Bootstrap subtheme.

I have successfully removed all of the other views markup with the following TWIG theme override templates:

views-view-fields--ts--page_1.html

views-view--ts--page_1.html

views-view-unformatted--ts--page_1.html

For some reason, I keep getting the following markup added:

<div class="views-element-container form-group">

I have tried using the views UI options to strip HTML and/or customize the markup output and this does nothing. I've also tried using the TWIG filters like striptags, but this either removes the entire views output (a comma separated list of email addresses) or doesn't work at all.

How do I remove <div class="views-element-container form-group">?

Answer 1

Okay, I figured it out. After setting the services.yml file debug to "true" and enabling comments in my Firefox console, I was able to get the theme output for the particular set of divs that was adding the unwanted markup (I tried this earlier, but I think I forgot to rename default.services.yml to services.yml).

Anyway, I found that the markup was coming from Bootstrap's container.html.TWIG template. Of course, this is one of the templates that doesn't come with override suggestions, just the hook theme_container() theme function. So I copied the default function into my [subtheme name].theme file at the top of my subtheme's directory and modified it thus to suit my needs:

<?php
// Implements hook_container().
use Drupal\Core\Template\Attribute;

function vatheme_container($variables) {

  $request = \Drupal::request();

  if ($route = $request->attributes->get(\Symfony\Cmf\Component\Routing\RouteObjectInterface::ROUTE_OBJECT)) {
    $title = \Drupal::service('title_resolver')->getTitle($request, $route);
  }

// Special handling for form elements.
$element = $variables['element'];
 // Ensure #attributes is set.
$element += array('#attributes' => array());

        if (isset($element['#array_parents'])) {
            // Assign an html ID.

            if (!isset($element['#attributes']['id'])) {
                $element['#attributes']['id'] = $element['#id'];
            }

            // Add the 'form-wrapper' class.
            $element['#attributes']['class'][] = 'form-wrapper';
        }

        if($title == 'Contact Tech Support'){           
            return $element['#children']; 
        }
        else{
            return '<div' . new Attribute($element['#attributes']) . '>' . $element['#children'] . '</div>';
        }
}

So, that seems to do the trick. This was my first stab at doing theme work in Drupal 8 and there are a lot of not insignificant changes from Drupal 7 here, so I thought I'd go through the details of my solution. Hopefully this helps someone else out there.

Answer 2

The following approach is a large improvement over Sky Tonnessen's answer and was originally written up in this gist by idiazroncero as it will not negatively affect the javascript wrapper classes functionality

Copy the following into YOURTHEME/templates/form/container.html.twig

{%
  set classes = [
    has_parent ? 'js-form-wrapper',
    has_parent ? 'form-wrapper',
  ]
%}

{# Remove unnecessary <div class="views-element-container"> wrapper #}
{% if attributes.hasClass('views-element-container') %}
  {{ children }}
{% else %}
  <div{{ attributes.addClass(classes) }}></div>{{ children }}</div>
{% endif %}

This is the only known workaround at the theme layer, since these classes are added via a preRender function. For a more sustainable approach, follow and help on #2721899: Move views-element-container to Twig template

Answer 3

If anyone stumbles here, I found this worked for me. You can override the twig in your theme.

Create this twig here: YOUR_THEME/templates/form/container.html.twig In the twig file just put:

{{ children }}