Add to block disabled

Permalink
I have a block named "Main". In the page there is a dotted grey box around the type saying "Add to Main". When I put my mouse over the type to add to the area, the area turns grey but the cursor does not change to a hand and does not allow me to add.

The box remains grey even after my mouse leaves the area. It only returns to normal when I rollover the properly working area.

I do have a block elsewhere on the page which works just fine. I can not see any difference in my code.

This code does not allow me to add:
<div id="container">
<?php
$m = new Area('Main');
$m->display($c);
?>

</div>

This code works fine:
<div class="menuLink" id="sidebarRight" >

<?php
$s = new Area('SideBar');
$s->display($c);
?>
</div>

Am I doing something wrong? Anybody familiar with this?I am running off of a local install on my MacBook Pro.

Any and all help is very much appreciated.
Thanks

 
jordanlev replied on at Permalink Reply
jordanlev
Are there any blocks already in the area? It's possibly a javascript issue caused by something on the page. Or perhaps an issue with some javascript you're including with your theme? Although it's strange that it works for the sidebar and not the main area.
lenl replied on at Permalink Reply
I have no blocks in the malfunctioning area. I have some minor javascript being loaded in my head section. Its not effecting the the sidebar which is functioning properly.

Here is the code for the div that the malfunctioning area is in:

#container {
width: 480px;
margin-left: 230px;
position: relative;
min-height: 100%;
z-index: 50;
padding-bottom: 100px;
clear: both;
float: left;
padding-top: 70px;
padding-right: 10px;
}
jordanlev replied on at Permalink Best Answer Reply
jordanlev
Hmm... it might have something to do with the styles. Try temporarily commenting out those and see if it works then. The z-index would be my first guess as to what could cause this, but I dunno, maybe the marins as well (230px is suspiciously large for a margin).

Also try commenting out the javascript in your <head>, just as a quick experiment. Probably not the cause but you never know.
lenl replied on at Permalink Reply
I removed the z-index and it worked. Is it possible that concrete5 doesnt support z-index? That would seem to me to be a pretty big flaw.

Thanks for the help. New to concrete5. So far so good.
jordanlev replied on at Permalink Reply
jordanlev
z-index is just a css class that affects how the browser shows a page -- there is nothing for concrete5 to support or not.

z-index determines which things are "in front of" other things, so if you have two things in the same place on a web page, the one with the higher z-index number will appear "in front of" the one with the lower z-index number. What must have been happening is the z-index of your div was higher than concrete5's z-index for its "Add to Main" link, and hence was being put "on top of it" and not allowing clicks to go through to the lower items.

Do you need the z-index? How is it being used in your layout? You can certainly work around this issue fairly easily by using a lower z-index number. If you can determine the z-index that concrete5 is using then you can make yours 1 lower than that. If that's too low compared to other elements on the page, you might need to reduce ALL of the z-indexes in your stylesheet to be lower (so they're still proportional to each other but lower than the concrete5 numbers). If that's not possible, you need to figure out what the class of the C5 element is for those edit links and override the z-index of that class in your stylesheet to be HIGHER than all of the other z-indexes on the page.

Hope that makes sense.
lenl replied on at Permalink Reply
Understood. I do have some z-index layering in my site. I used 50 just to ensure it was at the top. The site seems to be ok as is without a z-index setting so I work without it. C5 should have its default "add to area" link z-index raised higher. Perhaps 10,000 to ensure it is the top layer if your theory is correct.