0

zk 5.0 - vbox and hbox sizes are not recomputed when browser is resized

asked 2010-06-02 02:06:46 +0800

sony gravatar image sony
147 4

Hi,

I am using zk 5.0. I used hflex and vflex within hbox and vbox. However, when I resize the browser window the widths of these boxes are not automatically recomputed and resized according to the browser's window size as mentioned in the documentation. These are the two files I am using to test this.

File1: index.zul

<?xml version="1.0" encoding="UTF-8"?>
<?page title="LibX Edition Builder" ?>
<window xmlns:html="http://www.w3.org/1999/xhtml" id="root" use="org.libx.editionbuilder.MainWindowController">
<style src="../styles/editionbuilder.css" />
<script type="text/javascript" src="utility.js" />
<zscript>
import org.libx.editionbuilder.*;
Model.initializeDesktop();
root.initialize();
</zscript>
<?component name="libx.testing" macro-uri="testing.zul" inline="true"?>
<vbox hflex="1" sclass="mainbox">
<tabbox id="mainTabbox" hflex="1">
<tabs>
<tab label="Testing" id="testingtab" visible="true"/>
<zscript>
Tab[] tabs = {editiontab,linkstab,cattab,openurltab,eztab,optionstab,additionalfilestab};
root.registerTabs(tabs);
root.registerTabbox(mainTabbox);
if (Config.feedsactivated)
root.registerTab(feedstab);
</zscript>
</tabs>
<tabpanels hflex="1">
<tabpanel>
<libx.testing/>
</tabpanel>
</tabpanels>
</tabbox>
</vbox>
<vbox style="margin:1em" id="statusbox"/>
<zscript>
root.initialize(statusbox);
allListBox.initialize(allListSelectedEditionInfo, allListPaging, allListSearchResults);
</zscript>
</window>
<!-- vim: sw=2
-->

File2: testing.zul

<?xml version="1.0" encoding="UTF-8"?>

<!--
Testing box resizing on browser resizing
-->
<zk xmlns:html="http://www.w3.org/1999/xhtml">
<vbox hflex="1" sclass="mainbox">
<hbox hflex="1" sclass="level1box innerShadow">
This is level1box
</hbox>
<hbox hflex="1" sclass="level2box innerShadow">
This is level2box
</hbox>
</vbox>
</zk>

Could someone help me fix this?

Thanks,
Sony

delete flag offensive retag edit

7 Replies

Sort by ยป oldest newest

answered 2010-06-02 20:20:10 +0800

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

updated 2010-06-02 20:21:49 +0800

Hi sony
I have tested your sample
It worked with ZK 5.0.2

index.zul

<?xml version="1.0" encoding="UTF-8"?>
<?page title="LibX Edition Builder" ?>
<window xmlns:html="http://www.w3.org/1999/xhtml" id="root">
	
	<?component name="libx.testing" macro-uri="testing.zul" inline="true"?>
	<vbox hflex="1" sclass="mainbox">
		<tabbox id="mainTabbox" hflex="1">
			<tabs>
				<tab label="Testing" id="testingtab" visible="true" />
			
			</tabs>
			<tabpanels hflex="1">
				<tabpanel>
					<libx.testing />
				</tabpanel>
			</tabpanels>
		</tabbox>
	</vbox>
	<vbox style="margin:1em" id="statusbox" />	
</window>

testing.zul

<?xml version="1.0" encoding="UTF-8"?>

<!--
	Testing box resizing on browser resizing
-->
<zk xmlns:html="http://www.w3.org/1999/xhtml">
	<vbox hflex="1" sclass="mainbox">
		<hbox hflex="1" sclass="level1box innerShadow">
			This is level1box
		</hbox>
		<hbox hflex="1" sclass="level2box innerShadow">
			This is level2box
		</hbox>
	</vbox>
</zk>

Could you reproduce this problem in a simple sample ( without controller ) ?

link publish delete flag offensive edit

answered 2010-06-02 20:25:57 +0800

darkoasis09 gravatar image darkoasis09
63 2

What browser are you using?

I think i encountered the same problem when using Latest version of Chrome and Safari...

but using FF and IE works fine

link publish delete flag offensive edit

answered 2010-06-02 20:39:44 +0800

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

You can see my testing
http://screencast.com/t/NTA5ZGQxMD
so which component need to resize?

link publish delete flag offensive edit

answered 2010-06-02 23:36:48 +0800

sony gravatar image sony
147 4

@as1225: Thanks. I have reproduced the problem in a simple test case.

<?xml version="1.0" encoding="UTF-8"?>
<window>
<box hflex="1">
<hbox hflex="1">
<box hflex="1" style=" border: 1px solid #999999">
Inner Box 1
</box>
<box hflex="1" style=" border: 1px solid #999999">
Inner Box 2
</box>
</hbox>
</box>
</window>

@darkoasis09: I tested this on FF, IE and Chrome. The encountered this problem in all 3 browsers.

Refer to the following url for testing: http://top.cs.vt.edu:8080/editionbuilder/src/zul/resizetest.zul
Please re-size the window to observe the unexpected behavior.

Or, you can see my testing at
http://www.screencast.com/users/sonyv/folders/Default/media/c190c2ed-f9b1-48c7-843e-612f7aa24871

link publish delete flag offensive edit
link publish delete flag offensive edit

answered 2010-06-03 12:55:24 +0800

sony gravatar image sony
147 4

Hi,

The problem still persists. I am using zk 5.0. Do I have to upgrade to zk 5.0.2 to resolve this? Could you provide me a snapshot of your testing for the simple test case I provided in my previous post - resizetest.zul

Thanks.

link publish delete flag offensive edit

answered 2010-06-03 20:07:27 +0800

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

You can try ZK 5.0.3 latest freshly

resizetest.zul
http://screencast.com/t/YjI5NGI5

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-06-02 02:06:46 +0800

Seen: 604 times

Last updated: Jun 03 '10

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