Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi all,
i'm struggling with the toolbar. (zk 5.0.1)
The toolbar component have no regions. I need a Toolbar with three Regions for the buttons --> start - center - end
At time i play with 3 toolbars for this, but have problems with the background-color (in chrome), because i'm not able to spread the three toolbars to 100% of the place.
So between the middle and last toolbar are white space.
Here is a picture how it looks in chrome: pic
<div sclass="z-toolbar" style="padding:0">
<toolbar align="start" style="float:left">
<button id="btnHelp" label="Help"
tooltiptext="${c:l('btnHelp.tooltiptext')}" />
<separator orient="vertical" />
<separator orient="vertical" />
<separator orient="vertical" />
<separator orient="vertical" />
<separator orient="vertical" />
<separator orient="vertical" />
</toolbar>
<toolbar align="center" style="float:left">
<button id="btn2" height="20" label="search" />
<button id="btn3" height="20" label="print" />
</toolbar>
<toolbar align="end" style="float:right">
<button id="btnNew" height="20" label="New" />
<button id="btnEdit" height="20" label="Edit" />
<button id="btnDelete" height="20" label="Delete" />
<button id="btnSave" height="20" label="Save" />
<button id="btnClose" height="20" label="Close" />
</toolbar>
</div>
thanks for any help
Stephan
Hi Stephan,
maybe this can help.
The style change of td.z-hbox-sep is necessary to remove white strips between the toolbars. Maybe you create a own selektorclass for the hbox: .myclass td.z-hbox-sep {width: 0;}
<zk>
<style>
td.z-hbox-sep {
width: 0;
}
</style>
<hbox pack="stretch" style="padding:0" width="100%">
<toolbar align="start" style="float:left" width="100%">
<button id="btnHelp" label="Help" height="20"
tooltiptext="${c:l('btnHelp.tooltiptext')}" />
<separator orient="vertical" />
<separator orient="vertical" />
<separator orient="vertical" />
<separator orient="vertical" />
<separator orient="vertical" />
<separator orient="vertical" />
</toolbar>
<toolbar align="center" style="float:left" width="100%">
<button id="btn2" height="20" label="search" />
<button id="btn3" height="20" label="print" />
</toolbar>
<toolbar align="end" style="float:right" width="100%">
<button id="btnNew" height="20" label="New" />
<button id="btnEdit" height="20" label="Edit" />
<button id="btnDelete" height="20" label="Delete" />
<button id="btnSave" height="20" label="Save" />
<button id="btnClose" height="20" label="Close" />
</toolbar>
</hbox>
</zk>regards,
Gunter
FANTASTIC !!!
It works.
Many thanks Gunter
works now in the following way:
<style>
body { padding: 0 0; /* 0 padding on top and bottom and 0
padding on right and left */ }
<!-- remove white strips between the toolbars -->
.hboxRemoveWhiteStrips td.z-hbox-sep {width: 0; padding:0;}
</style>
<div sclass="z-toolbar" style="padding:0">
<hbox pack="stretch" sclass="hboxRemoveWhiteStrips" width="100%">
<toolbar align="start" style="float:left">
<button id="btnHelp" label="Help"
tooltiptext="${c:l('btnHelp.tooltiptext')}" />
<separator orient="vertical" />
<separator orient="vertical" />
<separator orient="vertical" />
<separator orient="vertical" />
<separator orient="vertical" />
<separator orient="vertical" />
</toolbar>
<toolbar align="center" style="float:left">
<button id="btn2" height="20" label="search" />
<button id="btn3" height="20" label="print" />
</toolbar>
<toolbar align="end" style="float:right">
<button id="btnNew" height="20" label="New" />
<button id="btnEdit" height="20" label="Edit" />
<button id="btnDelete" height="20" label="Delete" />
<button id="btnSave" height="20" label="Save" />
<button id="btnClose" height="20" label="Close" />
</toolbar>
</hbox>
</div>
Asked: 2010-05-04 08:25:56 +0800
Seen: 627 times
Last updated: May 04 '10