0

CSS issues on TWO grids, one with default style, the other with a custom one! Help avoid insanity!

asked 2011-03-12 07:18:50 +0800

pdavie gravatar image pdavie
97 3

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
to get the normal CSS rules to apply to a child instance of the ZK CSS styles.

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.

delete flag offensive retag edit

3 Replies

Sort by ยป oldest newest

answered 2011-03-12 11:26:08 +0800

gekkio gravatar image gekkio flag of Finland
899 1
http://gekkio.fi/blog

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 */
}

All that comma-separated CSS can be broken down into this equivalent CSS:
.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 */
}

Notice how only the first selector contains .plaingrid, so all the other selectors affect every grid, not grids with sclass="plaingrid".

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;
}

This would cause header cells in plain grids and content cells in every grid (plain or not) have a red background.

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!

link publish delete flag offensive edit

answered 2011-03-12 13:09:15 +0800

pdavie gravatar image pdavie
97 3

Thanks a great deal! I suspected my understanding of CSS was the issue. That is wonderfully helpful.
Thank you.

link publish delete flag offensive edit

answered 2011-03-12 21:55:40 +0800

pdavie gravatar image pdavie
97 3

updated 2011-03-12 21:59:14 +0800

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.

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2011-03-12 07:18:50 +0800

Seen: 581 times

Last updated: Mar 12 '11

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More