Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hello, i have a separator and want to style it but the style guide does not help me.
i just want to make the separator bold like in the borderlayout for example.
can anybody please tell me how to do that?
<row> <cell colspan="5" > <separator bar="true" /> </cell> </row>
Moloch,
I believe that since the separator bar is actually an image, you can't make simply change the style to make it bold. I suspect you'll have to use a different dot.gif image (as described here).
Once CSS3 is adopted in all the browsers, you'll be able to use the background-size property. Unfortunately, I think the only browser that supports this currently is Chrome. If you happen to have Chrome and want to see the result, try the following code:
<zk>
<style>
.z-separator-hor-bar {
background-size: 30em;
height: 50px;
}
</style>
<window style="padding: 25px;" border="normal" >
<label value="Top"/>
<separator bar="true"/>
<label value="Bottom"/>
</window>
</zk>
Maybe someone else has a better solution...
Regards,
Todd
That's the only way i know.
<zk...
xmlns:h="http://www.w3.org/1999/xhtml"
...
<window...
<style>hr {border: 0px; border-bottom: 1px dashed #069;}</style>
<h:hr />
. . .
best
Stephan
Moloch,
In thinking more about your question, perhaps you could try empty vlayout / hlayout tags. Consider:
<zk> <window style="padding: 25px;"> <vlayout> <label value="Top" /> <separator /> <hlayout width="50px" style="border: 3px solid red;"/> <separator /> <label value="Bottom"/> </vlayout> <space spacing="50px" orient="horizontal"/> <hlayout> <label value="Left" /> <separator /> <vlayout width="0px" height="50px" style="border: 3px solid red;"/> <separator /> <label value="Right"/> </hlayout> </window> </zk>
Hopefully the above code will give you some ideas...
Todd
Asked: 2010-10-14 06:03:34 +0800
Seen: 800 times
Last updated: Oct 19 '10