ZK - Open Source Ajax Java Framework
|
Boder Layout height issue
Borderlayout is used for those case that you want to "limit" the screen "land(real estate)" of its content thus you must tell borderlayout what height/width you would like it to be.
height="100%" / vflex="true"(available in ZK5) tells borderlayout to base its height on its parent component's height.
To show the scrollbar when the content is bigger than the borderlayout, you can use
e.g.
<center ... autoscroll = "true">
It is better that you post your SIMPLE WORKING zul file that will replicate your issue. So we can discuss that based on your case.
I want to use border layout for top menu, left menu and right side content area to support all resolutions
1. top menu,(North : height:50px, width:100%)
2. left menu (West below to the top menu , width:200px height:100%),
3. content area (center below to the top menu , width:100% height:100%),
this needs to be streched to 100 % of browser for (all resolutions ex: 1024 x 768, 1280 x 1024)
to achive the above requirement border layout is suitable, please help
Thanks and regards,
Thirupathi N
<borderlayout height="100%" width="100%"> <north> <menubar id="menubar" width="100%"> <menu label="Project" image="/img/Centigrade-Widget-Icons/Briefcase-16x16.png"> <menupopup> <menuitem image="/img/Centigrade-Widget-Icons/BriefcaseSpark-16x16.png" label="New" onClick="alert(self.label)" /> <menuitem image="/img/Centigrade-Widget-Icons/BriefcaseOpen-16x16.png" label="Open" onClick="alert(self.label)" /> <menuitem image="/img/Centigrade-Widget-Icons/DisketteBlack-16x16.png" label="Save" onClick="alert(self.label)" /> <menuseparator /> <menuitem label="Exit" image="/img/Centigrade-Widget-Icons/DoorOpen-16x16.png" onClick="alert(self.label)" /> </menupopup> </menu> <menu label="Help" image="/img/Centigrade-Widget-Icons/QuestionmarkButton-16x16.png"> <menupopup> <menuitem label="Index" onClick="alert(self.label)" /> <menu label="About"> <menupopup> <menuitem label="About ZK" onClick="alert(self.label)" /> <menuitem label="About Potix" onClick="alert(self.label)" /> </menupopup> </menu> </menupopup> </menu> <menu image="/img/Centigrade-Widget-Icons/Spyglass-16x16.png"> <menupopup> <menuitem label="Index" onClick="alert(self.label)" /> <menu label="Color Picker" content="#color=#184dc6"/> </menupopup> </menu> </menubar> </north> <west size="200px">This is west</west> <center>this is center</center> </borderlayout>
Hi Henri,
did you try your code in ZK-Demo? If I copy&paste it into the demo and run it, I see nothing... it only works if I specify a container with absolute width/height.
Cheers, Maik
Oh! You cannot try the code in ZK-Demo because the height of the "Demo" tabpanel is determined by its contents. And the 100% in borderlayout says "my height is 100% of my parent's height"; thus you see nothing.
If the code is in an independent page, the borderlayout is the outter most component and it will take all browser height as Thiru's request.
Thank you henrichen,
it is working fine for me, i have inculded the above border layout inside window (with height=100%, width=100%), i have tested this with zk.3.5.1 (removed "content="#color=#184dc6" " from this line <menu label="Color Picker" content="#color=#184dc6"/> )
Thiru
Dear All,
I want to use border layout, wth out height attribute it is not working, or with height="100%" also not working
if i use height="300px" it is displaying the content till 300px, rest is not displaying, even it is not shown any scroll bars,
is there any solution to use borderlayout with out missing the dynamic content, means hieght needs to be based on content, or need scrollbars if browser hieght, width is not enough.
Thanks
Thirupathi N