What property could break Concrete5 layouts?
Permalink
Something in my theme is breaking Concrete5 Layouts. Any content in an area that contains a layout to will vanish when the page is published or previewed. I tested by Switching to Greek Yogurt for that page, and this issue goes away (but reappears as soon as switching back to this theme. (SEE ATTACHED VIDEO SCREENSHOT)
The only reason I'm even using Layouts is because I'm using the Magic Tabs Add-on (which uses layouts to do its thing). However, the addon has nothing to do with this bug (because I can recreate the issue without even using the addon)
The theme is a customized version ofhttp://www.concrete5.org/marketplace/themes/gold/...
but I tested and the original exhibits the same problem. I did post a Support request, but the developer usually takes at least a few days to respond, and since it's certainly some CSS conflict, I was wondering if any CSS masters might have a clue.
The only reason I'm even using Layouts is because I'm using the Magic Tabs Add-on (which uses layouts to do its thing). However, the addon has nothing to do with this bug (because I can recreate the issue without even using the addon)
The theme is a customized version ofhttp://www.concrete5.org/marketplace/themes/gold/...
but I tested and the original exhibits the same problem. I did post a Support request, but the developer usually takes at least a few days to respond, and since it's certainly some CSS conflict, I was wondering if any CSS masters might have a clue.
Tab/accordion mechanisms generally work by manipulating the visibility of blocks by swapping display:none and display:block, sometimes with a transition between such as slide or fade.
To find out where the conflict arises will need a URL for the site so the css rules can be inspected in the developer console and see what is interfering or overriding the display property.
Another possible cause of a broken layout (though less likely in this case) is a mis-matched html tag. As it goes away with Greek Yogurt, the chances are the mismatched tag would be in the theme, or in a block in an area that only that theme shows.
As an aside, Magic Tabs does not use layouts to do its tabulation. Most of the other tabs addons do use layouts. Magic Tabs works by wrapping groups of blocks within an area. As each part of a layout is a pseudo-area, that is why Magic Tab sets do not cross layout boundaries.
To find out where the conflict arises will need a URL for the site so the css rules can be inspected in the developer console and see what is interfering or overriding the display property.
Another possible cause of a broken layout (though less likely in this case) is a mis-matched html tag. As it goes away with Greek Yogurt, the chances are the mismatched tag would be in the theme, or in a block in an area that only that theme shows.
As an aside, Magic Tabs does not use layouts to do its tabulation. Most of the other tabs addons do use layouts. Magic Tabs works by wrapping groups of blocks within an area. As each part of a layout is a pseudo-area, that is why Magic Tab sets do not cross layout boundaries.
The problem turns out to be that the Gold theme does have a bug.
This code
if($a->getTotalBlocksInArea($c) > 0 || $c->isEditMode()) { ?>
<div class="eleven columns ">
<?php $a->display($c); ?>
when using layout and then adding block to that layout the code above doesn't detect that it has an added block already. Since the purpose of the code is to collapse the design if there is no block added in that certain area, that's what it does (and my content disappears).
The simple workaround is to add an empty content block to the main area so that the code can detect that there is an existing block on the area and to display the area.
The only other thing that was weird to me was I already had a content block in that area, above where I put the layout, and for some reason as soon as I add the layout, it automatically puts that block in a layout (of it's own) as well. So that black (which did not need to be in a layout) get put in Layout 1 cell 1, and the layout for the blocks going into magic tabs goes into layout 2 cells 1, 2, 3, etc.
I tested & duplicated this behavior.
So I put a tnSPACER block AFTER the layout, and it worked.
I actually considered using Magic Tabs. The only reason I didn't was because I already had an unused license for EASY TABS, so why not try it first. But I very well may get a license for your Addon sometime soon (I already know the quality of your addons).
This code
if($a->getTotalBlocksInArea($c) > 0 || $c->isEditMode()) { ?>
<div class="eleven columns ">
<?php $a->display($c); ?>
when using layout and then adding block to that layout the code above doesn't detect that it has an added block already. Since the purpose of the code is to collapse the design if there is no block added in that certain area, that's what it does (and my content disappears).
The simple workaround is to add an empty content block to the main area so that the code can detect that there is an existing block on the area and to display the area.
The only other thing that was weird to me was I already had a content block in that area, above where I put the layout, and for some reason as soon as I add the layout, it automatically puts that block in a layout (of it's own) as well. So that black (which did not need to be in a layout) get put in Layout 1 cell 1, and the layout for the blocks going into magic tabs goes into layout 2 cells 1, 2, 3, etc.
I tested & duplicated this behavior.
So I put a tnSPACER block AFTER the layout, and it worked.
I actually considered using Magic Tabs. The only reason I didn't was because I already had an unused license for EASY TABS, so why not try it first. But I very well may get a license for your Addon sometime soon (I already know the quality of your addons).
Such 'quirks' of layouts that you are experiencing and hence quirks of blocks that depend on layouts is what initially led me to develop Magic Tabs as a solution that was completely independant of layouts.
Have a look at some of the latest Magic Tabs 2.x capabilities on my site.
http://www.c5magic.co.uk/add-ons/magic-tabs/getting-started/...
Have a look at some of the latest Magic Tabs 2.x capabilities on my site.
http://www.c5magic.co.uk/add-ons/magic-tabs/getting-started/...
Yes, Magic Tabs looks good. I appreciated one difference in particular being that most of the other Tab add-ons do rely on layouts, and that makes using them in Page Type Defaults difficult if not impossible.
Fortunately for this site I didn't need that (not yet anyway), so Easy Tabs worked out.
See how it turned out here
http://ndtfilmviewers.com/selection-guide/...
As I said, the quality of your add-ons is superb, as is the support (much faster than the Dev of Easy Tabs). Your Magic Tabs Add-On seems to be perhaps the most flexible. The only hesitation I ever have of your add-ons (if ever) is that they are often so powerful and flexible that it is sometimes a double edged sword (flexible but complex). But your support basically negates that concern for me.
So go get busy updating them for C5 version 7+
Cheers.
Fortunately for this site I didn't need that (not yet anyway), so Easy Tabs worked out.
See how it turned out here
http://ndtfilmviewers.com/selection-guide/...
As I said, the quality of your add-ons is superb, as is the support (much faster than the Dev of Easy Tabs). Your Magic Tabs Add-On seems to be perhaps the most flexible. The only hesitation I ever have of your add-ons (if ever) is that they are often so powerful and flexible that it is sometimes a double edged sword (flexible but complex). But your support basically negates that concern for me.
So go get busy updating them for C5 version 7+
Cheers.
Thanks for the nice words.
Magic Tabs for 5.7 is currently in the PRB. I am just waiting for another admin to approve it.
Once approved, it will be here http://www.concrete5.org/marketplace/addons/magic-tabs1/...
Magic Tabs for 5.7 is currently in the PRB. I am just waiting for another admin to approve it.
Once approved, it will be here http://www.concrete5.org/marketplace/addons/magic-tabs1/...
<div id="ccm-layout-wrapper-25" class="ccm-layout-wrapper multi-skins-tabs tabs_holder tabs_wrapper skin6 top" style="display: block; overflow: hidden; position: relative;">
Changing
display: block; to display: none;
mimics the issue, so I suspected something in the theme CSS for that area is over-riding it... but everything in the theme is display: block; or display:inline-block; (and I don't see any !important issues).
So I'm baffled.