0

Grid/List/Panel doesn't fill 100% the content of a window

asked 2010-05-25 07:51:18 +0800

efm gravatar image efm
183 1

Hello,
I'm using ZK 5.0.2, and I have the problem like in these screenshots:

1. when I open a window, the panel/grid is not 100% fill the entire content of the window
http://imagebin.ca/view/xVFNJyo.html

2. but when I resize that window, the panel/grid will fill the entire content of the window
http://imagebin.ca/view/XZVr7JJ.html

is there something wrong with my code?

<window border="normal" width="800px" height="400px" closable="true" mode="overlapped" position="center" sizable="true">
    <style>
        .z-window-overlapped-cnt, .z-window-modal-cnt { padding: 0px; }
        .z-tabbox-ver .z-tabpanel-ver { padding: 0px; }
        .z-tabpanel { padding: 0px; border: 0px; }
        .z-toolbar a, .z-toolbar a:visited, .z-toolbar a:hover {
            background-color:transparent;
            padding:3px;
            border-style: dotted;
		}
    </style>
    <caption  label=""/>
    <tabbox id="tbxOuter" orient="vertical" height="100%" width="100%">
        <tabs width="32px">
            <tab src="images/icons/system/entry.png"/>
            <tab src="images/icons/system/list.png"/>
        </tabs>
        <tabpanels>
            <tabpanel height="100%">
                <panel height="100%">
                    <toolbar>
                        <toolbarbutton id="tbEntryNew" image="images/icons/system/new.png" tooltiptext="New" onClick="spaceOwner.newItem();"/>
                        <toolbarbutton id="tbEntrySave" image="images/icons/system/save.png" tooltiptext="Save" onClick="spaceOwner.saveItem();"/>
                        <toolbarbutton id="tbEntryDelete" image="images/icons/system/delete.png" tooltiptext="Delete" disabled="true" onClick="spaceOwner.deleteEntryItem();"/>
                        <toolbarbutton id="tbEntryFind" image="images/icons/system/find.png" tooltiptext="Find" onClick="spaceOwner.find();"/>
						<toolbarbutton id="tbEntryAction" image="images/icons/system/action.png" tooltiptext="Action" onClick="spaceOwner.action();"/>
                    </toolbar>
                    <panelchildren>
                        <tabbox id="tbxInner" height="100%" width="100%">
                            <tabs>
                                <tab label="General"/>
                            </tabs>
                            <tabpanels>

                                <!--General-->
                                <tabpanel height="100%">
                                    <grid id="grid" fixedLayout="true" height="100%" vflex="true">
                                        <columns>
                                            <column label="Type" width="150px"/>
                                            <column label="Content"/>
                                        </columns>
                                        <rows>
                                        </rows>
                                    </grid>
                                </tabpanel>

                            </tabpanels>
                        </tabbox>
                    </panelchildren>
               </panel>
            </tabpanel>
            <tabpanel height="100%">
                <panel height="100%">
                    <toolbar>
                        <toolbarbutton id="tbListNew" image="images/icons/system/new.png" tooltiptext="Data Baru" onClick="spaceOwner.newItem();"/>
                        <toolbarbutton id="tbListEdit" image="images/icons/system/edit.png" disabled="true" tooltiptext="Edit" onClick="spaceOwner.editItem();"/>
                        <toolbarbutton id="tbListDelete" image="images/icons/system/delete.png" disabled="true" tooltiptext="Hapus" onClick="spaceOwner.deleteListItem();"/>
                        <toolbarbutton id="tbListExport" image="images/icons/system/export.png" tooltiptext="Export List" onClick="spaceOwner.export();"/>
                        <toolbarbutton id="tbListFind" image="images/icons/system/find.png" tooltiptext="Cari" onClick="spaceOwner.find();"/>
                        <toolbarbutton id="tbListRefresh" image="images/icons/system/refresh.png" tooltiptext="Refresh" onClick="spaceOwner.refreshList();"/>
						<toolbarbutton id="tbListAction" image="images/icons/system/action.png" tooltiptext="Action" onClick="spaceOwner.listAction();"/>
                    </toolbar>
                    <panelchildren>
                        <listbox id="lb" vflex="true" fixedLayout="true" mold="paging" pagingPosition="bottom" pageSize="100" style="overflow:auto"
                            height="100%" onSelect="tbListEdit.disabled=false; tbListDelete.disabled=false;">
                            <listhead sizable="true">
                                <listheader label="id" sort="auto" width="80px" visible="false"/>
                                <listheader label="moduser" sort="auto" width="80px" visible="false"/>
                                <listheader label="moddate" sort="auto" width="80px" visible="false"/>
                            </listhead>
                        </listbox>
                    </panelchildren>
                </panel>
            </tabpanel>
        </tabpanels>
    </tabbox>
</window>

thank you

delete flag offensive retag edit

16 Replies

Sort by ยป oldest newest

answered 2010-05-25 20:28:11 +0800

jimmyshiau gravatar image jimmyshiau
4921 5
http://www.zkoss.org/ ZK Team

Hi efm
I have tested your sample with IE 6 7 8 and FF Chrome
They worked well
How did you open the window ?

link publish delete flag offensive edit

answered 2010-05-25 23:44:22 +0800

efm gravatar image efm
183 1

hello,
I use this to open that window:
Window w = (Window) Executions.createComponents('window.zul", null, null);

I use FF and Chrome, and they're the same, just like in the screenshots I sent

link publish delete flag offensive edit

answered 2010-05-26 06:04:40 +0800

jimmyshiau gravatar image jimmyshiau
4921 5
http://www.zkoss.org/ ZK Team

You can try give a parent node
Executions.createComponents('window.zul", parentNode, null);

link publish delete flag offensive edit

answered 2010-05-26 22:44:06 +0800

efm gravatar image efm
183 1

hi as1225,
It doesn't work,

but I think it has something to do with the <style> tag:

    <style>
        .z-window-overlapped-cnt, .z-window-modal-cnt { padding: 0px; }
        .z-tabbox-ver .z-tabpanel-ver { padding: 0px; }
        .z-tabpanel { padding: 0px; border: 0px; }
        .z-toolbar a, .z-toolbar a:visited, .z-toolbar a:hover {
            background-color:transparent;
            padding:3px;
            border-style: dotted;
		}
    </style>

because if I delete this tag, then the content will fill 100%, although there are padding (I don't want the padding).

link publish delete flag offensive edit

answered 2010-05-26 22:49:41 +0800

efm gravatar image efm
183 1

hi as1225,

I think it's really related with the style (padding), because if I use any of the padding:0px line as above, the component will not 100% fill the window.
do you have solution for this?

link publish delete flag offensive edit

answered 2010-05-27 05:21:38 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

I have sometimes the same. Seems it's a resizing effect from the scrollbar. Means the white space have exactly the width of the Scroller.

link publish delete flag offensive edit

answered 2010-05-27 10:04:57 +0800

efm gravatar image efm
183 1

hi Terry,
I don't think it's because the scrollbar effect,
because the tab area also doesn't have 100% fill the parent's content, except when I resize the whole window, then all the components inside will fill out the parent

link publish delete flag offensive edit

answered 2010-05-27 10:32:26 +0800

efm gravatar image efm
183 1

btw, it doesn't happen in ZK 3.0

link publish delete flag offensive edit

answered 2010-05-27 12:37:43 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2010-05-27 12:46:58 +0800

I think it comes from a the scrollbar. Attached two pics.

1. with white spaces pic


2. after resizing (white spaces are gone away) pic

3. involved components pic

Panel 
  --> Groupbox
            --> Tab
                    --> Tabpanel


any idea?

best
Stephan

link publish delete flag offensive edit

answered 2010-05-27 21:04:37 +0800

jimmyshiau gravatar image jimmyshiau
4921 5
http://www.zkoss.org/ ZK Team

Hi efm
It is a timing problem
all components in window will calculator all size
but the style component isn't loaded yet
so they will set the wrong size
so you can invoke onSize when window has been rendered

you can use client side API

<window border="normal" width="800px" height="400px" closable="true" mode="overlapped" position="center" sizable="true" xmlns:w="http://www.zkoss.org/2005/zk/client">
	<attribute w:name="onBind"><![CDATA[
		zk.afterMount(function () {
			zWatch.fireDown('onSize', self);
		});
	]]></attribute>
...................................................
..............................

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2010-05-25 07:51:18 +0800

Seen: 1,098 times

Last updated: May 30 '10

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More