Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hello all,
I have a screen running under ZK5 that has a lot of data to display and I've been using multiple Groupboxes without the 3d mold which essentially makes fieldsets. Doing it this way groups the like data fields together in a nice, clean visual way. Plus, they look great on a wide screen because I can put 2 or 3 Groupboxes on a single line.
Here is an example of some code with 2 boxes:
<zk> <hbox> <groupbox width="600px"> <caption label="Box1:" /> <grid> <columns> <column label="Name" hflex="1"/> <column label="Value" hflex="1"/> </columns> <rows> <row>Username:<textbox hflex="1"/></row> <row>Password:<textbox hflex="1"/></row> </rows> </grid> </groupbox> <groupbox width="600px"> <caption label="Box2:" /> <grid > <columns> <column label="Name" hflex="1"/> <column label="Value" hflex="1"/> </columns> <rows> <row>First name:<textbox hflex="1"/></row> <row>Last name:<textbox hflex="1"/></row> </rows> </grid> </groupbox> </hbox> </zk>
The problem comes when a user comes along with a screen width that doesn't allow full viewing of all the boxes without scrolling (e.g. the user's screen width is only 800px wide)
What I'd like to be able to do is have the boxes "wrap" to the next line (like what would happen if I changed my <hbox> tags above to <vbox>.
However, try as I might, I cannot seem to get this auto wrapping to occur. At best the field labels within the groupbox will go to multiple lines but at some point the two boxes just start to overlap one another, making some of the fields not readable.
I've tried various combinations of Window, Panel, Columnlayout, Hbox, etc. components but no luck so far.
Does anyone have any ideas on how to make the 2nd groupbox drop down to the next line when the browser width gets too small?
Thanks to everyone who takes the time to read and to reply!
Todd
Have you tried clientinfo?
http://docs.zkoss.org/wiki/Browser_management#The_onClientInfo_Event
http://www.zkoss.org/javadoc/3.6.0/zk/org/zkoss/zk/ui/event/ClientInfoEvent.html
You may try to layout after knowing the width of client screen width.
If you still have problem, don't hesitate to let us know.
Thank you for your reply, Peter.
I was hoping there was a way for ZK to wrap the components automatically (sort of like Notepad or Microsoft Word does with words in a paragraph). From your reply, it seems we will have to build multiple layouts within each screen to account for a given user's browser size. Although this is not necessarily a new issue in webpage development, I was hoping ZK had an elegant solution that might alleviate some of the work our team will have due to the sheer number of screens we have to build.
Thanks again for taking the time to respond!
Kind regards,
Todd
Please show us a complete little sample with the div
@Todd
i do such things with groupbox mold="3d" and the sizes do automatically. I don't know is this a bug in the default mold.
Second, i use ONE groupbox with columnlayout in it for two columns.
With mold="3d" i can put a toolbar with buttons in the header too, like this pic.
<?xml version="1.0" encoding="UTF-8" ?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<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">
<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<!-- DataBinding Initiator. -->
<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./windowArticleDetails1" ?>
<window id="windowArticleDetails1" apply="${articleDetails1Ctrl}"
border="none" width="100%">
<borderlayout id="borderLayout_articleDetails1">
<center border="none" autoscroll="true">
<div>
<groupbox mold="3d" style="padding: 5px"
closable="false">
<caption image="/images/icons/view.gif"
label="${c:l('common.Description')}" />
<columnlayout>
<columnchildren width="50%"
style="padding: 5px">
<panel border="none">
<panelchildren>
<grid
sclass="GridLayoutNoBorder" fixedLayout="true"
style="border:0px; padding-left:5px; padding-right:5px;">
<columns>
<column width="150px" />
<column />
</columns>
<rows>
<row>
<hbox>
<label
value="${c:l('common.Article.No')}" />
<label value="*"
style="color:red;font-size:10px" />
</hbox>
<textbox
id="txtb_Article_ArticleNo"
value="@{controller.article.articleNo}"
constraint="no empty" readonly="true" maxlength="20"
width="150px" />
</row>
<row>
<hbox>
<label
value="${c:l('common.Shorttext')}" />
<label value="*"
style="color:red;font-size:10px" />
</hbox>
<textbox
id="txtb_Article_Shorttext"
value="@{controller.article.shorttext}"
constraint="no empty" readonly="true" maxlength="50"
width="99%" />
</row>
<row>
<separator
bar="true" />
<separator
bar="true" />
</row>
<!-- ArticleGroup / Artikelgruppe -->
<row>
<label
value="${c:l('common.ArticleGroup')}" />
<hbox pack="stretch"
width="100%">
<textbox
id="txtb_Article_ArticleGroup"
value="@{controller.article.articleGroup.groupname}"
readonly="true" width="100%" />
<div
align="left">
<button
id="btnSearchArticleGroup" disabled="true" height="24px"
image="/images/icons/btn_search2_16x16.gif"
tooltiptext="${c:l('btnSearch.tooltiptext')}" />
</div>
</hbox>
</row>
<!-- ReleasingUnit / Abgabe Einheit -->
<row>
<label
value="${c:l('common.ReleasingUnit')}" />
<hbox pack="stretch"
width="100%">
<textbox
id="txtb_Article_ReleasingUnit"
value="@{controller.article.releasingUnit.unitname}"
readonly="true" width="100%" />
<div
align="left">
<button
id="btnSearchReleasingUnit" disabled="true"
height="24px"
image="/images/icons/btn_search2_16x16.gif"
tooltiptext="${c:l('btnSearch.tooltiptext')}" />
</div>
</hbox>
</row>
</rows>
</grid>
</panelchildren>
</panel>
</columnchildren>
<columnchildren width="50%"
style="padding: 5px">
<panel border="none">
<panelchildren>
<grid
sclass="GridLayoutNoBorder" fixedLayout="true"
style="border:0px; padding-left:5px; padding-right:5px;">
<columns>
<column width="150px" />
<column />
</columns>
<rows>
<row>
<label
value="${c:l('common.Longtext')}" />
<textbox
id="txtb_Article_Longtext"
value="@{controller.article.longtext}" readonly="true"
multiline="true" rows="8" width="98%" />
</row>
</rows>
</grid>
</panelchildren>
</panel>
</columnchildren>
</columnlayout>
</groupbox>
<groupbox mold="3d" style="padding: 5px"
closable="false">
<caption image="/images/icons/table.gif"
label="${c:l('common.Prices')} / ${c:l('common.Stock2')}" />
<columnlayout>
<columnchildren width="50%"
style="padding: 5px">
<panel border="none">
<panelchildren>
<grid
sclass="GridLayoutNoBorder" fixedLayout="true"
style="border:0px; padding-left:5px; padding-right:5px;">
<columns>
<column width="150px" />
<column width="100%" />
</columns>
<rows>
<row>
<hbox>
<label
value="${c:l('common.ListPrice')}" />
<label value="*"
style="color:red;font-size:10px" />
</hbox>
<decimalbox
id="decimalb_ListPrice"
value="@{controller.article.listPrice}" readonly="true"
constraint="no empty" style="text-align: right"
width="50px" />
</row>
<row>
<label
value="${c:l('common.BasePrice')}" />
<decimalbox
id="decimalb_Article_Price"
value="@{controller.article.basePrice}" readonly="true"
style="text-align: right" width="50px" />
</row>
</rows>
</grid>
</panelchildren>
</panel>
</columnchildren>
<columnchildren width="50%"
style="padding: 5px">
<panel border="none">
<panelchildren>
<grid
sclass="GridLayoutNoBorder" fixedLayout="true"
style="border:0px; padding-left:5px; padding-right:5px;">
<columns>
<column width="150px" />
<column width="100%" />
</columns>
<rows>
<row>
<label
value="${c:l('common.TotalStockOnHand')}" />
<intbox
id="intb_Article_TotalStock"
value="@{controller.article.totalStock}" readonly="true"
style="text-align: right" width="50px" />
</row>
<row>
<label
value="${c:l('common.AvailableStock')}" />
<intbox
id="intb_Article_AvailableStock"
value="@{controller.article.availableStock}"
readonly="true" style="text-align: right" width="50px" />
</row>
<row>
<separator
bar="true" />
<separator
bar="true" />
</row>
<!-- StockPLaces / Lagerplatz -->
<row>
<label
value="${c:l('common.Stockname')}" />
<hbox pack="stretch"
width="100%">
<textbox
id="txtb_Article_StockPlace"
value="@{controller.article.stockPlace.stockname}"
readonly="true" width="100%" />
<div
align="left">
<button
id="btnSearchStockPlace" disabled="true" height="24px"
image="/images/icons/btn_search2_16x16.gif"
tooltiptext="${c:l('btnSearch.tooltiptext')}" />
</div>
</hbox>
</row>
</rows>
</grid>
</panelchildren>
</panel>
</columnchildren>
</columnlayout>
</groupbox>
</div>
</center>
</borderlayout>
</window>
</zk>
Like this:
<zk> <div style="float: left;"> <groupbox width="600px"> <caption label="Box1:" /> <grid> <columns> <column label="Name" hflex="1"/> <column label="Value" hflex="1"/> </columns> <rows> <row>Username:<textbox hflex="1"/></row> <row>Password:<textbox hflex="1"/></row> </rows> </grid> </groupbox> </div> <div style="float: left;"> <groupbox width="600px"> <caption label="Box2:" /> <grid > <columns> <column label="Name" hflex="1"/> <column label="Value" hflex="1"/> </columns> <rows> <row>First name:<textbox hflex="1"/></row> <row>Last name:<textbox hflex="1"/></row> </rows> </grid> </groupbox> </div> </zk>
It is a work-around, but it works... :-)
Todd
Yes "twiegand" did it well.
My own example is:
<zk> <div> <div style="float: left;"> <groupbox width="500px"> <caption label="Box1:" /> <grid> <columns> <column label="Name" hflex="1"/> <column label="Value" hflex="1"/> </columns> <rows> <row>Username:<textbox hflex="1"/></row> <row>Password:<textbox hflex="1"/></row> </rows> </grid> </groupbox> </div> <div style="float: left;"> <groupbox width="500px"> <caption label="Box2:" /> <grid > <columns> <column label="Name" hflex="1"/> <column label="Value" hflex="1"/> </columns> <rows> <row>First name:<textbox hflex="1"/></row> <row>Last name:<textbox hflex="1"/></row> </rows> </grid> </groupbox> </div> </div> </zk>
But, if the internal parts of the main <div> were not groupboxes,
it would not needed to enclose the groupboxes with <div style="float: left;"></div> tags.
Can anybody explain why this is specially needed for groupbox?
Hey Terry,
How did you able to show toolbar in the groupbox header ?
You can place the toolbar in the caption of a groubox or panel like this pic .
<groupbox mold="3d" closable="false">
<caption image="/images/icons/view.gif"
label="${c:l('common.Order.Positions')}">
<div sclass="z-toolbar"
style="padding:0">
<hbox pack="stretch"
sclass="hboxRemoveWhiteStrips" width="100%">
<toolbar align="start"
style="float:left; border-style: none;">
</toolbar>
<toolbar align="center"
style="float:left; border-style: none;">
</toolbar>
<toolbar align="end"
style="float:right; border-style: none;">
<button id="btnNew"
height="24px" tooltiptext="${c:l('btnNew.tooltiptext')}" />
<button id="btnEdit"
height="24px" tooltiptext="${c:l('btnEdit.tooltiptext')}" />
<button id="btnDelete"
height="24px" tooltiptext="${c:l('btnDelete.tooltiptext')}" />
<button id="btnSave"
height="24px" tooltiptext="${c:l('btnSave.tooltiptext')}" />
<button id="btnCancel"
height="24px" tooltiptext="${c:l('btnCancel.tooltiptext')}" />
</toolbar>
</hbox>
</div>
</caption>
<panel border="none">
<panelchildren>
. . .
</panelchildren>
</panel>
</groupbox>
best Stephan
Asked: 2010-03-12 16:41:24 +0800
Seen: 1,326 times
Last updated: May 27 '16