0

Grouped Grid - Can't get Arrow Image to change to what I set in CSS

asked 2012-09-10 14:50:40 +0800

ansancle gravatar image ansancle
327 9

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]

delete flag offensive retag edit

2 Replies

Sort by ยป oldest newest

answered 2012-09-11 20:44:57 +0800

ansancle gravatar image ansancle
327 9

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

link publish delete flag offensive edit

answered 2012-09-14 01:32:17 +0800

paowang gravatar image paowang
140 6

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.

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: 2012-09-10 14:50:40 +0800

Seen: 127 times

Last updated: Sep 14 '12

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