Please refer to the attached screen grab.

The page you see is a Views page of teasers. Hovering over either a) any teaser or b) anywhere covered by the view that isn't a teaser (you know how it works) produces the same result: all contextual links in the view (including those for teasers) stacked up on top of each other, stuffed up in the top right corner of the view. If you look real closely, the contextual link's cog icon is a bit ragged where you can see edges of other icons below.

The top-most contextual link wins out when clicking (the one for editing the view) - likely because it's higher up in the markup.

The screen grab is of the Ohm theme but I've definitely seen this in custom sub themes based on Omega 4 before Ohm even existed (hence filing this issue under "Code" and not "Ohm").

CommentFileSizeAuthor
Google Chrome.png480.18 KBdddbbb
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

fubhy’s picture

Oh, right... Well, that's not an Omega issue though afaik. It's contextual links CSS in general. Will see if we can fix that anyways though. Otherwise we should just file it as a contextual links module issue.

dddbbb’s picture

Aah, sorry. Hadn't seen the same issue in Bartik so just presumed it was due to the only contrib theme I had installed - Omega 4.

But yes, an Omega-side fix would be grand :D

dddbbb’s picture

Title: Contextual links bunching up » Contextual links bunching up when using a Display Suite layout for teasers

This appears to be a Display Suite related issue.

Steps to reproduce

1) Enable (and set as default) a theme that isn't already providing a CSS fix for this issue (e.g. Omega 4).
2) Create a view page of nodes that displays content teasers.
3) Select a Display Suite provided layout for said node's teaser display (e.g. "One column").
4) Check out the view page: all the contextual links will be absolutely positioned on top of each other in the top right corner of the view (like the screen shot in the OP).

Solution

The display suite layout doesn't explicitly set the teaser wrapper div to position: relative; so this needs to be set somewhere in order to position the contextual links correctly, relative to the position of each teaser.

In my example above, the following would work:

.ds-1col {
  position: relative;
}

But this only caters to the "One column" layout. A more brutal solution would be:

.views-row {
  position: relative;
}

But this is probably a bit over the top and we can't ensure that Views is always going to provide the list of teasers so that class may not be reliable.

What would be really handy is if we could print an extra class whenever a Display Suite layout is used, in addition to the class for the layout itself. So rather than:

<div class="views-row">
  <div class="ds-1col clearfix">
    <!-- stuff... -->

we'd actually have:

<div class="views-row">
  <div class="ds-layout ds-1col clearfix">
    <!-- stuff... -->

so that we could do this:

.ds-layout {
  position: relative;
}

So do we add this extra class in Omega via a hook or process function or do we now consider this a Display Suite issue and see about a fix at that end? Or both?

DamienMcKenna’s picture

Version: 7.x-4.0-beta6 » 7.x-4.x-dev
Issue summary: View changes
joelstein’s picture