Revision history [back]

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>