Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi all,
i need your help with a layout.
I will redesign the DialogWindows in the sample app and take the CRUD buttons (now only with Images and Tooltiptext) on top in the toolbar as a block on their right side.
I struggled with a simple design. I have a toolbar where on the left side should be one button and on the right side should be a block of a few buttons.
In the ZK Visual editor it looks correct but on runtime under chrome the buttons are all on left.
Under IE8 it's correct.
Does anybody know how is the correct container/order for a all same looking.
<borderlayout id="borderlayoutUser">
<north border="none" margins="0,0,0,0">
<div>
<toolbar>
<hbox width="100%">
<div align="left">
<button id="btnHelp"
image="/images/icons/light_16x16.gif"
tooltiptext="${c:l('btnHelp.tooltiptext')}" />
</div>
<div id="divSouth" align="right">
<hbox spacing="3px"
style="padding:3px" align="end">
<button id="btnNew" height="20"
label="${c:l('btnNew.label')}"
tooltiptext="${c:l('btnNew.tooltiptext')}" />
<button id="btnEdit" height="20"
label="${c:l('btnEdit.label')}"
tooltiptext="${c:l('btnEdit.tooltiptext')}" />
<button id="btnDelete"
height="20" label="${c:l('btnDelete.label')}"
tooltiptext="${c:l('btnDelete.tooltiptext')}" />
<button id="btnSave" height="20"
label="${c:l('btnSave.label')}"
tooltiptext="${c:l('btnSave.tooltiptext')}" />
<button id="btnClose"
height="20" label="${c:l('btnClose.label')}"
tooltiptext="${c:l('btnClose.tooltiptext')}" />
</hbox>
</div>
</hbox>
</toolbar>
</div>
</north>
thanks
Stephan
PS: For all who have the sources. It's from the UserDialog.zul
Push. Where are the great designers :-)
Maybe you could put everything into a grid.... (not tested with chrome but with Firefox & IE it's working)
<grid >
<columns sizable="true" height="40px">
<column width="151px" align="center">
<div>
<hbox>
<button id="btnHelp"
image="/images/icons/light_16x16.gif"
tooltiptext="${c:l('btnHelp.tooltiptext')}" />
</hbox>
</div>
</column>
<column align="right">
<hbox>
<div>
<hbox spacing="3px"
style="padding:3px" align="end">
<button id="btnNew" height="20"
label="${c:l('btnNew.label')}"
tooltiptext="${c:l('btnNew.tooltiptext')}" />
<button id="btnEdit" height="20"
label="${c:l('btnEdit.label')}"
tooltiptext="${c:l('btnEdit.tooltiptext')}" />
<button id="btnDelete"
height="20" label="${c:l('btnDelete.label')}"
tooltiptext="${c:l('btnDelete.tooltiptext')}" />
<button id="btnSave" height="20"
label="${c:l('btnSave.label')}"
tooltiptext="${c:l('btnSave.tooltiptext')}" />
<button id="btnClose"
height="20" label="${c:l('btnClose.label')}"
tooltiptext="${c:l('btnClose.tooltiptext')}" />
</hbox>
</hbox>
</column>
</columns>
</grid>Many many thanks Juliane,
that works perfect.
Asked: 2009-12-02 15:33:12 +0800
Seen: 463 times
Last updated: Dec 04 '09