0

Resize Browser: Parent hides child elements without scrollbar

asked 2012-11-08 18:11:12 +0800

myZKBG gravatar image myZKBG
87

Hello,

I have a problem, that parts of my listbox will be hidden after resizing my browser (I'm using Firefox 16).
You can see this behavoir at zksandbox: http://www.zkoss.org/zksandbox/#g8

You can resize your browser to a height, where the listbox can't be displayed completely. You can still use the scrollbar: if you move it down, it "bar" will be hidden as well. Try clicking it and moving it down (don't release). The bar is hidden, but you definitely see, that parts of the listbox are hidden. I tried to capture this in the following two pictures:
Start:

Hidden bottom of the listbox (scrollbar is mostly hidden):

Now I need help: How to fix this? If the user resizes its browser, the parent element should(!!!) expand, so that no child element (the listbox) will be hidden. Does this only appear at BorderLayout (center) ? If yes, why doesn't autoscroll works? (I tried it on my local machine, no scrollbar appeared)

Any solution?

best regards

delete flag offensive retag edit

2 Replies

Sort by ยป oldest newest

answered 2012-11-13 01:48:40 +0800

samchuang gravatar image samchuang
4084 4

hi, you can try to use vflex, if parent component change height when browser resize, vflex will reset height.

If component doesn't resize when browser resize, you will need to write client side code, listen onSize event, and reset widget height

link publish delete flag offensive edit

answered 2012-11-14 16:41:44 +0800

myZKBG gravatar image myZKBG
87

updated 2012-11-14 16:42:18 +0800

Hey,

thanks for your reply. In the following topic: http://www.zkoss.org/forum/listComment/21087-Help-with-Layout-Height-flexible We found out, that vflex is exactly the problem, that causes the error. The parent node is defined with vflex. If the browser shrinks the view, this node will shrink as well, without attention to its child nodes, e.g. the listbox. vflex/hflex has no relation to the content.

I currently haven't found a function / way, which provides the functionality I want to achieve: Minimum height + flexible pxpansion, if possible. Without self made code (which is very ugly, because you have to specify this for nearly every element), it looks like it's not possible.
It's only possible for a Window with border + resizable enabled. There you can specify a minimum height/width + manually expansion.

best regards

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: 2012-11-08 18:11:12 +0800

Seen: 89 times

Last updated: Nov 14 '12

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