-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi,
I've got a header / detail section on the page, the header I want to be plain, whilst the detail I'd like the hover colors, alternate colors etc ZK does automatically.
I've (finally) got one of my grids to be plain, clean simple creatures for the header section, using the following CSS:
.plaingrid tr.z-row td.z-row-inner, tr.z-row .z-cell,div.z-grid, tr.z-grid-odd td.z-row-inner, tr.z-grid-odd .z-cell, tr.z-grid-odd, tr.z-row-over > td.z-row-inner { border: none; overflow: hidden; zoom: 1; background: white none repeat scroll 0 0; border-top: none; border-top-style: none; border-top-width: 0px; padding-top: 5px; border-left: none; border-right: none; border-bottom: none; border-bottom-style: none; border-bottom-width: 0px; padding-bottom: 5px; }
Ive included this in my ZUL file like so:
<style dynamic="true" src="css/grid.css" />
Everything works fine. Except, I have another grid on the page, which I use for detail view, where I DO want the ZK default style.
I've tried the following (without success):
1. use the style tag, e.g. style="notplaingird" just so it's clearly not the same style, groping in the dark, I know.
2. changed that to sclass="notplaingrid" // which also does not exist
3. Changed the CSS as follows:
tr.z-row.plaingrid td.z-row-inner.plaingrid, tr.z-row.plaingrid .z-cell.plaingrid, div.z-grid.plaingrid, tr.z-grid-odd.plaingrid td.z-row-inner.plaingrid, tr.z-grid-odd .z-cell, tr.z-grid-odd.plaingrid, tr.z-row-over.plaingrid > td.z-row-inner.plaingrid
Unfortunately, none of this works. One table is great, just as per the CSS in grid.css, but so is the other, even when I give it a non-existent sclass name, hoping the CSS applied would be the default.
Thanks in advance for any help or suggestions.
I think you've slightly misunderstood how CSS comma-separated selectors work. I'll try to explain:
Here's your style definition which includes many selectors separated with commas:
.plaingrid tr.z-row td.z-row-inner, tr.z-row .z-cell,div.z-grid, tr.z-grid-odd td.z-row-inner, tr.z-grid-odd .z-cell, tr.z-grid-odd, tr.z-row-over > td.z-row-inner { /* styles */ }
.plaingrid tr.z-row td.z-row-inner { /* styles */ } tr.z-row .z-cell { /* styles */ } div.z-grid { /* styles */ } tr.z-grid-odd td.z-row-inner { /* styles */ } tr.z-grid-odd .z-cell { /* styles */ } tr.z-grid-odd { /* styles */ } tr.z-row-over > td.z-row-inner { /* styles */ }
Here's a theoretical example that might be easier to read and understand:
.redgrid .header-cell, .content-cell { background-color: red; } /* The CSS above has exactly the same effect as the CSS below: */ .redgrid .header-cell { background-color: red; } .content-cell { background-color: red; }
So, if you want to apply styles only to grids with sclass="plaingrid", you have to include plaingrid in every CSS selector in your comma-separated list:
.plaingrid tr.z-row td.z-row-inner, .plaingrid tr.z-row .z-cell, div.z-grid.plaingrid, .plaingrid tr.z-grid-odd td.z-row-inner, .plaingrid tr.z-grid-odd .z-cell, .plaingrid tr.z-grid-odd, .plaingrid tr.z-row-over > td.z-row-inner { /* styles */ }
Notice how most selectors have .plaingrid prepended to them. The only exception is div.z-grid which is defined as div.z-grid.plaingrid. That means that the CSS rule applies only to elements which have both classes z-grid and plaingrid (which is the case if you use sclass="plaingrid" on the grid component).
Hopefully that helps!
Thanks gekkio, just tried it in the code and it worked like a dream!
For those interested, the final CSS looks like this:
@CHARSET "UTF-8"; .plaingrid tr.z-row td.z-row-inner, .plaingrid tr.z-row .z-cell, div.z-grid.plaingrid, .plaingrid tr.z-grid-odd td.z-row-inner, .plaingrid tr.z-grid-odd .z-cell, .plaingrid tr.z-grid-odd, .plaingrid tr.z-row-over > td.z-row-inner { border: none; overflow: hidden; zoom: 1; background: white none repeat scroll 0 0; border-top: none; border-top-style: none; border-top-width: 0px; padding-top: 5px; border-left: none; border-right: none; border-bottom: none; border-bottom-style: none; border-bottom-width: 0px; padding-bottom: 5px; }
This will give you a totally plain (white background) grid with no borders, highlight or alternate row colours.
I use this to create data entry forms for example, for a header / detail section.
I did have a workaround using a listbox instead of a grid, which visually achieves the same effect, but is subject to the limitations of listboxes, not grids.
Asked: 2011-03-12 07:18:50 +0800
Seen: 581 times
Last updated: Mar 12 '11