Jump to:
| Project: | Zen |
| Version: | 7.x-5.x-dev |
| Component: | CSS/SASS/HTML markup |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
Hi! I'm playing a bit with the new zengrids support of zen theme but I've found an issue/bug with nested grids.
More precisely I've a node content which needs a grid for displaying his fields but using zen-grid-item() will not generate margins between the three columns:
Relevant fragments of html/scss code:
HTML output generated by default zen 5.1 theme:
<div id="container">
<a id="main-content"></a>
<h1 id="page-title" class="title">....</h1>
<h2 class="element-invisible">Primary tabs</h2>
<ul class="tabs primary">...</ul>
<div class="region">
<article class="node">
...
<div class="field_one">...</div>
<div class="field_two">...</div>
<div class="field_three">...</div>
...
</article>
</div>
</div>SCSS code
At the end of responsive-sidebars.scss I've added the following code:
@media all and (min-width: 960px) {
.field_one{ zen-grid-item(4,1) }
.field_two{ zen-grid-item(4,5) }
.field_three{ zen-grid-item(4,9) }
}Dirty hack used to fix the bug:
Currently I've found a dirty way which set "zen-nested-container" on "#content" div and apply "zen-grid-item-base()" to all divs before and after the grid inside the .., after I've set "$zen-auto-include-item-base: true;" before setting the zen-grid-item() on the three fields. Otherwise if you only set "zen-nested-container" on "#content" div, his left and right margins will be zeroed and you will find h1 or primary tabs near the #main border.
Proposed solution
Well... maybe I'm doing something wrong, but the zen/zengrids documentations doesn't help. It looks more a logical problem to me: setting the "zen-nested-container" works only if every divs inside will be managed with zengrids, but it adds extra coding (like the solution I've found) and moreover is not flexyble: you've to check every site type of page/view/panel in order to assure to have forced zen-grid-item-base to elements outside the nested grid.
I suggest to follow the 960gs approach: when you've a nested grid the first and the last element of each row should have left and right margin respectively set to zero (invert them for rtl).
I really hope to have well explained the problem.
Thanks for the attention.
| Attachment | Size |
|---|---|
| example-zengrids-layout.jpg | 62.75 KB |
Comments
#1
#2
I am struggling with the same issue. I have tried FinNeX approach but I can't get the gutters/margin to work for my fields, is there anything I am doing wrong?
This is my html structure
<div id="main"><div id="content" class="column" role="main">
<article class="node-1 node ...">
<div class="field field-name-1 ...>"field 1 content"</div>
<div class="field field-name-2 ...>"field 2 content"</div>
</article>
</div>
</div>
And my nodes.scss
@media all and (min-width: 960px) {$zen-column-count: 8;
$zen-gutter-width: 20px;
#content{
@include zen-grid-item-base();
@include zen-nested-container();
}
.node {
.field-name-body {
@include zen-grid-item-base();
$zen-auto-include-item-base: true;
@include zen-grid-item(6, 1);
}
.field-name-title-field {
@include zen-grid-item-base();
$zen-auto-include-item-base: true;
@include zen-grid-item(2, 7);
}
}
}
And thanks for such an amazing and useful theme btw!