Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Mousing over a row in a grid object causes the row background color to highlight to a different color. I don't seem to see any CSS property for this (correct me if im wrong). How do I change the color of the mouseover of the row or remove it?
Also, even though I changed the background color of the window, and background color of the grid, it appears that there is still a white border around the grid and the rows. Is this some kind of dropshadow? If so, what CSS option is there to change the color of it?
The grid CSS I messed with (specifically the background: attribute to set to black)are:
div.z-grid
div.z-grid-body
div.z-grid-footer
div.z-grid-header
.z-grid
None of those appear to do anything to get rid of the white border or dropshadow around the rows.
Gpan,
What version of ZK are you using? With 5.0.4 there is no change in background when mousing over anything with a grid. That behavior seems more inline with the use of a Listbox.
Are you using a different theme? Or perhaps do you have some style attached to the grid that you overlooked?
Todd
ZK5.0.4. The behavior happens with the Breeze theme. I have no idea how to do it.
However, the white border around the grid/rows/columns is still present even without the breeze theme.
Gpan,
Maybe this will help a bit:
<style>
tr.z-grid-odd td.z-row-inner,tr.z-grid-odd .z-cell,tr.z-grid-odd{background:white}
tr.z-row td.z-row-inner,tr.z-row .z-cell{background:white;border-top:none;border-left:1px solid white;border-right:1px solid #CCC;border-bottom:1px solid #DDD;}
</style>
Todd
Worked perfectly, though for some reason each row still has a white border, even though I thought I specified the background to be black. (change all the white to black in your posting).
If I could know how to get rid of the white border, or dropshadow around the grid... I would most appreciate it. I hope it is just a css attribute I missed.
To leave the borders untouched, but simply remove the highlight, try this:
<style>
.no-highlight tr.z-grid-odd td.z-row-inner,tr.z-grid-odd .z-cell,tr.z-grid-odd, .no-highlight tr.z-row-over > td.z-row-inner
{
background:white;
}
</style>
Set the "sclass" of your grid to "no-highlight". There may be a slight border colour change, still, but the main row itself will not have a mouse over change.
Asked: 2010-10-06 21:33:30 +0800
Seen: 1,370 times
Last updated: Sep 20 '12
