When using the Panels module within Drupal, I often end up with multiple gear icons stacked on top of each other, inaccessible to the Drupal admin.
For example, take a Panels page with this structure:
- A Drupal View
When logged in as a Drupal admin, I can access the gear icon for MyCustomContentPaneBottom easily.
However, when I try to edit MyCustomContentPaneTop, I can only see an "Edit Panel" gear icon. I can see that this originates with this code, toward the bottom of the page.
<div class="contextual-links-wrapper contextual-links-processed"> <a class="contextual-links-trigger" href="#">Configure</a> <ul class="contextual-links" style="display: none;"> <li class="0 first last"> <a class="colorboxNodeContextual-processed" href="/admin/structure/pages/nojs/operation/page-MyPanelPageName/handlers/page_MyPanelPageName_panel_context_2/content">Edit Panel</a> </li> </ul> </div>
I can see in the HTML source that the gear icon does exist for MyCustomContentPaneTop, but it must be sitting in a z-index below the Panels gear icon.
<div class="pane-content"> <div class="contextual-links-region"><div class="panel-display panel-1col clearfix" > <div class="panel-panel panel-col"> <div><div class="contextual-links-region panel-pane pane-custom pane-1" > <div class="contextual-links-wrapper"><ul class="contextual-links"><li class="0 first last"><a href="/admin/structure/ctools-content/list/MyCustomContentPaneTop/edit">Configure content pane</a></li></ul></div> ... </div>
I know I can hack around with very specific CSS rules that apply only to pages where I discover this issue. However, is there an easy Drupal (or CSS) method to say, "If two gear icons are stacked on top of one another, stagger them by 5 pixels?"