miss-aligned hover edit panel

Permalink
I'm trying to convert a Foundation 3 template and I'm having problems when trying to edit the blocks.

When I hover over the block the grey panel appears below and is difficult to click on.

Any ideas?

 
CygnetMidwest replied on at Permalink Reply
CygnetMidwest
More than likely the CSS in the theme is conflicting with the CSS for the admin editing. I've had this happen before for themes we've done.

You'll need to view the site with Firebug or something similar and see what styles is causing the panels to shift. Then, you'll need to add a CSS override so that the admin editing interface is not affected by the theme CSS.
tonyswaby replied on at Permalink Reply
I use Chrome Dev tools, but it's not as simple as finding the div's that have the problem.

Actually fixed it from another post.

So Foundation3 is working fine now.

Very nice and responsive:)
CygnetMidwest replied on at Permalink Reply
CygnetMidwest
Sometimes it is as simple as finding the div and changing the CSS. All the issues I've had with edit element misaligning were solved this way. Sorry it didn't work for you.
vladdu replied on at Permalink Reply
vladdu
Hi!

What was the post that gave you the solution? I tried searching, but don't get the right keywords...
vladdu replied on at Permalink Reply
vladdu
For reference, I fixed it by adding to app.css the following, since foundation's globals.css sets the value to 'relative':

body {
   position: static; 
}
tonyswaby replied on at Permalink Reply
Me too:)

Sorry I didn't get back to ya.
vladdu replied on at Permalink Reply
vladdu
No problem, thanks. The question is if this change won't affect foundation's layouts. Maybe we should set the value only when in edit mode?
Steevb replied on at Permalink Reply
Steevb
Also check it's not a javascript conflict