Edit mode - clickable area far out of dotted lines
Permalink
I am building a theme using the Zurb Foundation framework. Easy to setup, no problem adding in the concrete5 bits. But when I go into edit mode, the clickable shadowy box area is far below the "Add to ..." area. I've attached an image of the problem if my description is not clear.
In addition to looking wrong, it can cause some overlap problems that make it impossible to select the correct block to edit.
Any ideas on how to fix it?
In addition to looking wrong, it can cause some overlap problems that make it impossible to select the correct block to edit.
Any ideas on how to fix it?
It is always below, and the space gets larger the longer the block space is.
I was using a different vertical offset script that I found on the
forums, so I switched to one that is in the default template. I got the
same results, and confirmed via firebug that the offset was in place.
I'm open to any other ideas.
Thanks JohntheFish.
-j
On 3/21/2012 1:59 AM, concrete5 Community wrote:
I was using a different vertical offset script that I found on the
forums, so I switched to one that is in the default template. I got the
same results, and confirmed via firebug that the offset was in place.
I'm open to any other ideas.
Thanks JohntheFish.
-j
On 3/21/2012 1:59 AM, concrete5 Community wrote:
Maybe check your css to make sure it is sufficiently constrained to not conflict with the dashboard placement css.
Maybe check the code that decides when to add the offset to your pages, perhaps it is not detecting the right user/login info, so the condition is broken.
Maybe check the code that decides when to add the offset to your pages, perhaps it is not detecting the right user/login info, so the condition is broken.
That did it. Removed one relative position and it all works now. Thanks.
Which stylesheet did you have to modify? The one you made or a concrete one? I'm having the same issue.
I don't recall which one, but I think I just went through the layout stylesheet, searched for "relative" and then commented each line out in turn until the issue went away and didn't wreck the template.
If you're using the Foundation framework, comment out or remove the "position: relative" within the body tag in foundation.css.
Before:
After:
Before:
body { background: white; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1; color: #222222; position: relative; -webkit-font-smoothing: antialiased; }
After:
body { background: white; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1; color: #222222; -webkit-font-smoothing: antialiased; }
A better way is to add the following to override the foundation body css;
Just include that in your own css and everything is sweet.
body { position: static; }
Just include that in your own css and everything is sweet.
Thank you, thank you, THANK YOU!
Hi I noticed that you've been using Foundation. Did you install the drop-down menus? if so, how did you get them to work without interfering with the css within edit mode.
I gave up on the dropdown menus and just went with the Amiant extension.
If you want to have dropdown then take a look athttp://slicknav.com/ creates a responsive nav and mobile dropdown from autonav. I use this with foundation.
If you look at the standard themes, there is a vertical offset when in edit mode to allow for the height of the menu bar.