I am creating a custom View for my Search API results page. I have many fields added and they are all set to hidden. This allows me to have a custom text field at the end that can have a unique layout.

I am trying to make each search result have a card-based UI - and the whole card needs to be clickable.

So, I have added a link around the entire <div> but it's not working. Drupal is injecting a </a> immediately after the opening <a> tag. This is leaving a 0 pixel tall link.

Here is the code I'm using in the custom text field:

<a href="{{ path('entity.node.canonical', { 'node' : nid}) }}" class="search-people-link">

<div class="search-people">
     <div class="search-people-headshot">
          {{ field_featured_image }}
     <div class="search-people-meta">
          <h2>{{ title_1 }}</h2>
          <p>{{ field_designation|length > 50 ? field_designation|slice(0, 50) ~ '...' : field_designation  }}</p>


I've tried moving the link inside the outer div. I've tried using the "Output as custom link" feature but it did the same thing.

The link wrapping around the entire thing is being closed too early (immediately before the <div class="search-people">. I need that link to make the entire div clickable.

  • Drupal does not inject HTML tags in the middle of your Twig templates - but browsers do, when you build invalid HTML . E.g. browsers transform invalid nested links like <a href="#1">foo<a href="#2">bar</a></a> into <a href="#1">foo</a><a href="#2">bar</a> – Hudri May 14 '19 at 4:59
  • 1
    Thank you! While this wasn't a solution, it allowed me to find the answer. I had to edit each field item and remove the "Link to content" option. It was confusing Firefox when it found a link inside my manually-added link. – user1566957 May 14 '19 at 12:54

Your Answer

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

Browse other questions tagged or ask your own question.