-
FEATURED COMPONENTS
First time here? Check out the FAQ!
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
Hi efm
I have tested your sample with IE 6 7 8 and FF Chrome
They worked well
How did you open the window ?
You can try give a parent node
Executions.createComponents('window.zul", parentNode, null);
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).
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.
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
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> ................................................... ..............................
Asked: 2010-05-25 07:51:18 +0800
Seen: 1,098 times
Last updated: May 30 '10