0

Combobox's border

asked 2008-10-31 21:34:53 +0800

jyluo gravatar image jyluo
147 1 1

How to customize a combobox's border? I have tried several approach, including declare CSS styles for .z-combobox, .z-combobox-inp, and set style using "setStyle" method in "org.zkoss.zul.Combobox". None of them have ANY effects on the component.

delete flag offensive retag edit

9 Replies

Sort by » oldest newest

answered 2008-11-04 11:30:16 +0800

PeterKuo gravatar image PeterKuo
481 2

by using firebug, I tried to modify border to 10px, and it worked.
can it help you?

.z-combobox-inp {normmoz....5304F8DFF (行 1209)
background:#FFFFFF url(/helloworld/zkau/web/zul/img/grid/text-bg.gif) repeat-x scroll 0 0;
border:10px solid #7F9DB9;
}

link publish delete flag offensive edit

answered 2008-11-04 22:20:44 +0800

jyluo gravatar image jyluo
147 1 1

I further tested it and found .z-combobox-inp only works in .zul files, but not in .jsp with ZK taglib. I examined the output HTML pages and interestingly, the HTML page generated from .zul is the same as that generated from .jsp. That means the javascript library included by the client HTML pages must has done something that overrides .z-combobox-inp.
Here is the .jsp page that set border to 0px (which does NOT work):
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://www.zkoss.org/jsp/zul" prefix="zk" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
.z-combobox-inp {border:0px;background-image:none;}
</style>
</head>
<body>
<zk:page style="width:100%;height:100%">
<zk:combobox>
<zk:comboitem label="item"/>
</zk:combobox>
</zk:page>
</body>
</html>
And here is the .zul file that is supposed to do the same (which works):
<?page id="testZul" title=" New ZUL Title" cacheable="false"
language="xul/html" zscriptLanguage="Java" contentType="text/html;charset=UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>

<zk xmlns="http://www.zkoss.org/2005/zul"
xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">

<style>
.z-combobox-inp {border:0px;background-image:none}
</style>
<combobox>
<comboitem label="item"/>
</combobox>
</zk>

link publish delete flag offensive edit

answered 2008-11-05 01:13:15 +0800

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

You may take a look at this How-to How to resolve the issue of CSS not loaded in IE6&7 while integrating ZK and JSP.

link publish delete flag offensive edit

answered 2008-11-05 18:00:41 +0800

jyluo gravatar image jyluo
147 1 1

jumperchen, thanks for your reply. But I am sure this is not the problem (I followed the suggestion but it did not work). Actually the ZK CSS DID load in the JSP page, because I tried the following line in JSP, and the input box did disappear:
.z-combobox-inp {display:none;}
That means the CSS were loaded but the border settings were overridden for some reasons. And this is not just IE -- I tried it on FF without any success either.

link publish delete flag offensive edit

answered 2008-11-06 00:53:24 +0800

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

Maybe you can use the important keywords to solve it.
For example,

 .z-combobox-inp {
border:0px !important;background-image:none !important;
}

It seems to be a problem which CSS is loaded first.

link publish delete flag offensive edit

answered 2008-11-07 21:25:48 +0800

jyluo gravatar image jyluo
147 1 1

Thanks. But the "!important" keyword works on most but not all browsers. I think this is a bug because CSS properties declared in HTML head should always override those from an external CSS file. I guess ZK is actually dynamically setting some CSS properties at the client side, which is unnecessary (why not define everything in a CSS file) and may cause troubles (as this one).

link publish delete flag offensive edit

answered 2008-11-10 04:06:43 +0800

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

Hi,

Could you tell me which browser do you use?

link publish delete flag offensive edit

answered 2008-11-10 14:08:42 +0800

jyluo gravatar image jyluo
147 1 1

I use FF and I know !important works on the latest IE. But I also know it has some problems on earlier version of IE.

link publish delete flag offensive edit

answered 2008-11-11 01:05:29 +0800

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

Maybe you can use zk lang-addon.xml to include the style sheet instead of specifying the style to the head of the document directly.
I guess the problem is caused by loading the order of these style sheets.

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: 2008-10-31 21:34:53 +0800

Seen: 584 times

Last updated: Nov 11 '08

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