Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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.
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;
}
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>
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.
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.
Maybe you can use the important keywords to solve it.
For example,
.z-combobox-inp {
border:0px !important;background-image:none !important;
}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).
Hi,
Could you tell me which browser do you use?
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.
Asked: 2008-10-31 21:34:53 +0800
Seen: 587 times
Last updated: Nov 11 '08