Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hello,
I can't figure out how to layout my website with ZK: I want an area (div/whatever) which is at 100% height if content is less than the viewable area and if its larger, it should expand. Important: Resizing the browser should not hide any information. The 100% height is a nice to have, but my problem is especially with content larger than the viewable area: How do handle this? :(
Example @ ZkFiddle: http://zkfiddle.org/sample/1opul2q/4-Flexible-Layout
or:
<zk xmlns:n="native">
<window border="none" vflex="1">
<vlayout>
<div>Test</div>
<div>Test2</div>
</vlayout>
<vlayout vflex="1" style="border:1px solid blue;">
<div style="background-color:red;">myTest</div>
<div style="background-color:yellow">
Test<n:br />Test<n:br />Test<n:br />Test<n:br />Test<n:br />Test<n:br />Test<n:br />Test<n:br />Test<n:br />Test<n:br />Test<n:br />Test<n:br />Test<n:br />Test<n:br />
Test2<n:br />Test2<n:br />Test2<n:br />Test2<n:br />Test2<n:br />Test2<n:br />Test2<n:br />Test2<n:br />Test2<n:br />Test2<n:br />Test2<n:br />Test2<n:br />Test2<n:br />Test2<n:br />
Test3<n:br />Test3<n:br />Test3<n:br />Test3<n:br />Test3<n:br />Test3<n:br />Test3<n:br />Test3<n:br />Test3<n:br />Test3<n:br />Test3<n:br />Test3<n:br />Test3<n:br />Test3<n:br />
Test4<n:br />Test4<n:br />Test4<n:br />Test4<n:br />Test4<n:br />Test4<n:br />Test4<n:br />Test4<n:br />Test4<n:br />Test4<n:br />Test4<n:br />Test4<n:br />Test4<n:br />Test4<n:br />
Test5<n:br />Test5<n:br />Test5<n:br />Test5<n:br />Test5<n:br />Test5<n:br />Test5<n:br />Test5<n:br />Test5<n:br />Test5<n:br />Test5<n:br />Test5<n:br />Test5<n:br />Test5<n:br />
</div>
</vlayout>
</window>
</zk>
"Test 5" is hidden by the vlayout with blue border, although vflex="1" is given. If I add vflex to the yellow-div (@background color), nothing changes. I could add "overflow:auto;" to the blue-border-vlayout, but I don't want a scrollbar inside a page. I only want to have 1 scrollbar for the whole page -> extend the areas. Normal HTML automatically extend to its content - what do I do wrong with zk? :(
Please! Anyone? :(
best regards, myZKBG
try these line:
<div style="background-color:yellow; overflow:auto" vflex="1">
best
Stephan
Hello terry,
thanks for your reply, but it doesn't work the way I like.
It would be the same as overflow:auto for the blue-border-vlayout, but I don't want a scrollbar inside the page.
The overflow:auto would create a scrollbar only for the yellow-area.
Better example: http://zkfiddle.org/sample/2vu5tun/2-Flexible-Layout
If you remove the vflex="1" from the yellow-div, the green-div in the bottom will be gone! It will be hidden somewhere without a overall scrollbar. This is an even better example, because there are other elements and not only content, which is hidden.
In both cases, content is invisible for the user. :( I wonder, if I'm the only one with a problem like that? :/
I'm grateful for any suggestion!
best regards, myZKBG
I'm not really understand what you want.
Which content/area should the scrollbars contain?
best
Stephan
The window, if possible.
Like in this forum, there is only 1 scrollbar at the right side (like on every regular page).
It looks like I didn't / don't understand the usage of vflex/hflex or %-height on ZK pages.
I thought: "Okay, let's use vflex/height, so the overall container (like window) grows to the given space of the view area of the browser. If the content increases, they container will grow _over_ the view area to display all the content. Now I think, here is my mistake: height/vflex has no relation to its content, only the its parent size (for window the view area of the browser). That's why no scrollbar on the window appears.
In general, I wanted something like this: http://zkfiddle.org/sample/3o846mv/1-Flexible-Layout
PLUS: if the content is smaller than the view area, my window should get the size of the view area. - but I think, that the combination of both (grow to view area + extend if neccessary is not possible?! Because adding height="100%" and "overflow:auto;" to window doesn't work. That's a pity :/
best regards
myZKBG
No difference to http://zkfiddle.org/sample/3o846mv/1-Flexible-Layout ?
See: http://zkfiddle.org/sample/3gepvcm/3-3-Flexible-Layout (your version with color)
Scrollbar appears, if the content is too high, yes (like my link before),
but no height =100% if content is smaller than the view area.
Hi myZKBG,
How about this? http://zkfiddle.org/sample/1opul2q/5-Flexible-Layout
Here I use is "contentStyle" attribute in window instead of style.
Hello vincentjian,
between your script and mine is no big difference. You added the scrollbar to the overaall window element, mine to the browser window. But I still not achieve the behavior I want. I will try to write a client script which will resize my browser to a specific width (=minimum width), when the browser resizes under the minimum width. It's the current width is still above the limit, everything is fine.
best regards
Hello,
I've tried something for the "width", which works in general, but ZK is undoing my changes each time. (base was http://www.zkoss.org/forum/listComment/6532 )
http://zkfiddle.org/sample/24b51np/2-Minimum-Window-Width
If you resize your browser, sometimes, there is a scrollbar for my element (than there are 2 because zkfiddle generate 1 scrollbar for the page in general) and sometimes, there is only 1 (the bar from zkfiddle) and none for "mywin". I'm not really sure, if there is an event on mywin, which acts, like $$onSize (found that in the documentation), but I'm unable to turn this function of or to make my function superior.
Perhaps you know now, what I want: If you user resizes the page, I want to have a minimum width for the overall window (all children will adapt that). If the width fall under a specified limit, like 1200 in my example, the width should be constantly on 1200. If it's larger, that's great.
Any idea, how to get this working?
best regards
Asked: 2012-11-12 10:01:29 +0800
Seen: 194 times
Last updated: Dec 03 '12
