-
FEATURED COMPONENTS
First time here? Check out the FAQ!
I am trying to get the Arrow indicator on the grouped grid to be a image I created.
No matter what I do the images stay the ones that are the defaults. I modified the sandbox demo to show what I am talking about so you can run it in the sandbox.
I am using an image found on the ZK sandbox so I know it's there - I also put an image at the top of the page with the sclass set to that image path to confirm it's correct.
According to the documents and what I have found using firebug, the following CSS should cause the arrow to change to the image I am specifying but it's not working.
I deal with changing ZK css all the time but I cannot figure out why this isn't working. I have tried in firefox, safari, and chrome to be sure it wasn't a browser thing.
.z-group-img .z-group-img-open
{
background-image: URL(./img/Centigrade-Widget-Icons/Globe-128x128.png) no-repeat;
height: 100%;
min-height: 56px;
width: 56px;
}
.z-group-img-close
{
background-image : URL(./img/Centigrade-Widget-Icons/Globe-128x128.png) no-repeat;
height: 100%;
min-height: 56px;
width: 56px;
}
CUT AND PASTE THE CODE BELOW HERE TO RUN IN SANDBOX
<zk> <zscript> import org.zkoss.zksandbox.*; Comparator asc = new RowLabelComparator(true), dsc = new RowLabelComparator(false); </zscript> <style> .z-group-inner .z-group-cnt .z-label, .z-group-inner { color: #636363; font-family: arial,sans-serif; font-size: 42px; font-weight: bold; padding-bottom: 4px; padding-left: 2px; padding-right: 2px; padding-top: 4px; width: auto; } .z-group-img .z-group-img-open { background-image: URL(./img/Centigrade-Widget-Icons/Globe-128x128.png) no-repeat; height: 100%; min-height: 56px; width: 56px; } .z-group-img-close { background-image : URL(./img/Centigrade-Widget-Icons/Globe-128x128.png) no-repeat; height: 100%; min-height: 56px; width: 56px; } .dhPresetsArrowUp { background : URL(./img/Centigrade-Widget-Icons/Globe-128x128.png) no-repeat; border : none; height : 128px; width : 128px; } </style> <image sclass="dhPresetsArrowUp"/> <grid> <columns sizable="true"> <column label="Brand" sortAscending="${asc}" sortDescending="${dsc}"/> <column label="Processor Type" width="150px"/> <column label="Memory (RAM)" width="120px"/> <column label="Price" width="100px"/> <column label="Hard Drive Capacity" width="150px"/> </columns> <rows> <group label="Dell"/> <row> <label style="padding-left:15px" value="Dell E4500 2.2GHz"/> <label value="Intel Core 2 Duo"/> <label value="2GB RAM"/> <label value="$261.00" style="color:green"/> <label value="500GB"/> </row> <groupfoot spans="5"> <label value="This a summary about Compaq Desktop PCs"/> </groupfoot> </rows> </grid> </zk> /code]
Check this:
http://books.zkoss.org/wiki/ZK%20Style%20Guide/XUL%20Component%20Specification/Group/Default
I also modify your code here:
<zk> <zscript> import org.zkoss.zksandbox.*; Comparator asc = new RowLabelComparator(true), dsc = new RowLabelComparator(false); </zscript> <style> .z-group-img { width: 18px; min-height: 18px; height: 100%; background-position: 0; background-image: url(img/Centigrade-Widget-Icons/ArrowUpOrange-16x16.png); background-repeat: no-repeat; vertical-align: top; cursor: pointer; border: 0; } .z-group-img-open { background-position: 0; background-image: url(img/Centigrade-Widget-Icons/ArrowDown-16x16.png); background-repeat: no-repeat; vertical-align: top; cursor: pointer; border: 0; } </style> <image sclass="dhPresetsArrowUp"/> <grid> <columns sizable="true"> <column label="Brand" sortAscending="${asc}" sortDescending="${dsc}"/> <column label="Processor Type" width="150px"/> <column label="Memory (RAM)" width="120px"/> <column label="Price" width="100px"/> <column label="Hard Drive Capacity" width="150px"/> </columns> <rows> <group label="Dell"/> <row> <label style="padding-left:15px" value="Dell E4500 2.2GHz"/> <label value="Intel Core 2 Duo"/> <label value="2GB RAM"/> <label value="$261.00" style="color:green"/> <label value="500GB"/> </row> <groupfoot spans="5"> <label value="This a summary about Compaq Desktop PCs"/> </groupfoot> </rows> </grid> </zk>
Hope it helps.
I was able to find a workaround when using the grouped Listbox that I suspect will work with the Grouped Grid as well, but I have not tested.
Instead of trying to change the "background-image" I just set the "background" itself to the image I want, this works for the grouped list :
.z-listgroup-img { background: URL(./images/mobile/gridgroupopen_100x100.png) no-repeat !important; height: 100%; min-height: 128px; vertical-align: center; horizontal-align: center; width: 128px; } .z-listgroup-img-close { background: URL(./images/mobile/gridgroupclosed_100x100.png) no-repeat !important; height: 100%; min-height: 128px; vertical-align: center; horizontal-align: center; width: 128px; }
Asked: 2012-09-10 14:50:40 +0800
Seen: 127 times
Last updated: Sep 14 '12