0

CSS Listbox Style not showing same as in ZKStudio

asked 2009-10-19 20:18:02 +0800

ansancle gravatar image ansancle
327 9

I am trying to make a listbox with all rows background and borders are black and all of the text is white.
I used the ZK CSS Editor to do this and the preview listbox sample from the demo to test it, it shows is 100% what I am looking for.
When I take the style created and put it directly in my .zul file and attempt to run it I am getting different results. The even rows are
still white with black text, the odd rows look the way I want, black with white text.

I am deploying to jboss and the welcome file is defined as a simple .zul file.
This file contains the listbox sample from the demo with the image's removed.
I took the css generated from the ZK css editor and put it directly into this file, just as I did in the demo where it worked.
Below is the contents of the file.
My question is can anyone think of a reason I am getting different behaviour in the demo than when I deploy to jboss? This is making me crazy since when I upgraded from the last version of ZK to this one, many of my styles I had defined no longer work properly.
Any pointers appreciated.

<window title="Listbox" border="normal">
<style>
/*ZCS:1.0,3.6:
Information : Generated by ZK Studio Style Designer, compatible with ZK 3.5.2;
Don't edit any content between SEC and SEC_E comments.
*//*SEC:LISTBOX-DEFAULT:*/
/*RULE:LISTITEM*/
div.z-listbox .z-list-item div.z-list-cell-cnt{
	color : #FFFFFF; /*PRO*/
}
div.z-listbox .z-list-item{
	background-color : #000000; /*PRO*/
}
div .z-listbox-body{
	border-color : #000000; /*PRO*/
}
/*RULE_E*//*RULE:ODDROW*/
div.z-listbox tr.z-listbox-odd {
	background-color : #000000; /*PRO*/	
}
/*RULE_E*//*RULE:LISTCELL*/
.z-list-cell{
	border-color : #000000; /*PRO*/
}
/*RULE_E*//*RULE:LISTGROUP*/
td.z-list-group-inner div.z-list-cell-cnt{
	color : #FFFFFF; /*PRO*/
}
div.z-listbox-body td.z-list-group-inner{
	background-color : #000000; /*PRO*/
}
/*RULE_E*//*RULE:LISTGROUPFOOT*/
td.z-list-group-foot-inner div.z-list-cell-cnt{
	color : #FFFFFF; /*PRO*/
}
div.z-listbox-body .z-list-group-foot-inner{
	background-color : #000000; /*PRO*/
}
/*RULE_E*//*RULE:LISTHEADER*/
div.z-listbox div.z-list-header-cnt{
	color : #FFFFFF; /*PRO*/
	text-align : center; /*PRO*/
}
.z-listbox div.z-listbox-header tr.z-list-head, .z-listbox div.z-listbox-header tr.z-auxhead{
	background-color : #000000; /*PRO*/
	background-image : none; /*PRO*/
}
.z-listbox div.z-listbox-header th.z-list-header, .z-listbox div.z-listbox-header tr, .z-listbox div.z-listbox-header th.z-auxheader{
	border-color : #000000; /*PRO*/
}
/*RULE_E*//*RULE:LISTHEAD*/
div.z-listbox-header,  div.z-listbox-header tr,  div.z-listbox-header tr.z-auxhead {
	border-color : #000000; /*PRO*/
}
/*RULE_E*//*RULE:LISTFOOT*/
.z-list-footer-cnt{
	color : #FFFFFF; /*PRO*/
}
div.z-listbox-footer tr.z-list-foot{
	background-color : #000000; /*PRO*/
	background-image : none; /*PRO*/
}
div.z-listbox-footer{
	border-color : #000000; /*PRO*/
}
/*RULE_E*//*RULE:LISTFOOTER*/
div.z-listbox-footer .z-list-footer{
	border-color : #000000; /*PRO*/
}
/*RULE_E*//*RULE:LISTBOX-DEFAULT*/
div.z-listbox {
	border-color : #000000; /*PRO*/
}
/*RULE_E*//*RULE:TOP-PAGING-DEFAULT-FONT*/
div.z-listbox div.z-listbox-pgi-t .z-paging .z-paging-inp,div.z-listbox div.z-listbox-pgi-t .z-paging .z-paging-text,div.z-listbox div.z-listbox-pgi-t .z-paging .z-paging-info{
	color : #FFFFFF; /*PRO*/
}
/*RULE_E*//*RULE:TOP-PAGING-DEFAULT*/
div.z-listbox div.z-listbox-pgi-t .z-paging{
	background-color : #000000; /*PRO*/
	background-image : none; /*PRO*/
	border-color : #000000; /*PRO*/
}
/*RULE_E*//*RULE:BOTTOM-PAGING-DEFAULT-FONT*/
div.z-listbox div.z-listbox-pgi-b .z-paging .z-paging-inp,div.z-listbox div.z-listbox-pgi-b .z-paging .z-paging-text,div.z-listbox div.z-listbox-pgi-b .z-paging .z-paging-info{
	color : #000000; /*PRO*/
}
/*RULE_E*//*RULE:BOTTOM-PAGING-DEFAULT*/
div.z-listbox div.z-listbox-pgi-b .z-paging{
	background-color : #000000; /*PRO*/
}
/*RULE_E*//*RULE:BOTTOM-PAGING-OS-FONT*/
div.z-listbox div.z-listbox-pgi-b .z-paging-os .z-paging-os-cnt,div.z-listbox div.z-listbox-pgi-b .z-paging-os span{
	color : #FFFFFF; /*PRO*/
}
/*RULE_E*//*RULE:BOTTOM-PAGING-OS*/
div.z-listbox div.z-listbox-pgi-b .z-paging-os{
	background-color : #000000; /*PRO*/
}
	
/*RULE_E*//*RULE:TOP-PAGING-OS-FONT*/
div.z-listbox div.z-listbox-pgi-t .z-paging-os .z-paging-os-cnt,div.z-listbox div.z-listbox-pgi-t .z-paging-os span{
	color : #FFFFFF; /*PRO*/
}
/*RULE_E*//*RULE:TOP-PAGING-OS*/
div.z-listbox div.z-listbox-pgi-t .z-paging-os{
	background-color : #000000; /*PRO*/
}
/*RULE_E*/
/*SEC_E*/
</style>
<vbox width="100%">
	<listbox rows="1" mold="select">
		<listitem label="Inbox"/>
		<listitem label="Received"/>
		<listitem label="Draft"/>
	</listbox>		

	<separator bar="true"/>
	<listbox fixedLayout="true">
		<listhead sizable="true">
			<listheader label="Foo" sort="auto"/>			
			<listheader label="Subject" sort="auto"/>
			<listheader label="Received" sort="auto"/>
		</listhead>
		<listitem height="28px">
			<listcell label="rtrtyrtyrty" />
			<listcell label="ZK Studio 0.9.0 released." />
			<listcell label="2008/11/16 10:26:37" />
		</listitem>
		<listitem height="28px">
			<listcell label="vbnvnvnvb" />
			<listcell label="ZK Studio 0.9.0 released." />
			<listcell label="2008/11/16 10:26:37" />
		</listitem>
		<listitem height="28px">
			<listcell label="asdasdasd" />
			<listcell label="ZK Studio 0.9.0 released." />
			<listcell label="2008/11/16 10:26:37" />
		</listitem>
		<listitem height="28px">
			<listcell label="fghfhfhfgh" />
			<listcell label="ZK Studio 0.9.0 released." />
			<listcell label="2008/11/16 10:26:37" />
		</listitem>
	</listbox>
</vbox>
</window>
			

delete flag offensive retag edit

5 Replies

Sort by ยป oldest newest

answered 2009-10-20 13:29:30 +0800

ansancle gravatar image ansancle
327 9

updated 2009-10-20 13:30:38 +0800

link publish delete flag offensive edit

answered 2009-10-20 19:29:20 +0800

ansancle gravatar image ansancle
327 9

I found my solution, I am using ZK 5, and you need to take the css generated by the Studio and do a find/replace for "list-" and replace with just plain "list".

link publish delete flag offensive edit

answered 2009-10-21 21:16:50 +0800

jumperchen gravatar image jumperchen
3909 2 8
http://jumperchen.blogspo... ZK Team

Hi,

In ZK5, some naming pattern in CSS have changed, so the ZK studio is not working well.

/Jumper

link publish delete flag offensive edit

answered 2010-09-28 06:11:46 +0800

rohitwadke gravatar image rohitwadke
339 1 5

Hey Hello,

I am using silver gray theam.. it apply to all component except listbox header.

Please tell me solution..
Thank you

link publish delete flag offensive edit

answered 2010-10-05 09:16:27 +0800

jumperchen gravatar image jumperchen
3909 2 8
http://jumperchen.blogspo... ZK Team

It may have some bug in the silver gray theme or somewhere. Could you provide some steps for us to reproduce the same issue you met?

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: 2009-10-19 20:18:02 +0800

Seen: 2,033 times

Last updated: Oct 05 '10

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