Contextual links for nodes displayed via views

Question

When you create a node or a block you get a contextual link icon in top right of the item when hovering and etc. It is easy to edit content like that and etc.

When you create a view page and display multiple nodes via it, there are no contextual links hovering on those items and the only way to edit those is via Content.

I.e. I have a Panels page. It has a node at the top area of the page and it has that hovering icon for contextual links and it is easy to edit that node while viewing this panels page.

And then at the bottom area there's is a view which shows some grid-listed nodes too and none of those nodes has access to contextual links.

So is this possible somehow to add contextual links to nodes shown via Views?

Answer 1

Solved it myself.

Steps:

1. Enable Global: Contextual Links and Content: Edit Link fields
2. Exclude Content: Edit Link from display
3. In Global: Contextual Links settings, select the Content: Edit Link

However this works correctly and fine only while in preview mode, when watching the actual page in action the links nor the cog icon does not appear. As I understand this is some kind of a bug.

To fix that, you need to add additional CSS to your theme, which is (in my case):

.views-field-contextual-links {
  position: relative;
}

And now everything works fine, every element has it's own drop down cog/link.

Answer 2

In Drupal 8 this is currently broken (as of 8.3.2). Until this is fixed, here is an alternative:

• Add the "Link to Edit Content" field to your view
  • Give it a label like "Edit node"
  • Choose to Exclude from display
• Add the "Global: Dropbutton" field to your view
  • Selecting the above Link to Edit Content in the settings
• Rearrange the fields to be at the top of your view

• Depending on your theme you may need to style this yourself. Here's some simple CSS you can start with:

  .contextual-region.view .views-field-dropbutton {
      display: none;
      position: absolute;
      right: 0;
  }
  .contextual-region.view:hover .views-field-dropbutton {
      display: block;
  }