Scroll tree with static header and dynamic height

asked 2016-04-08 14:41:24 +0800

Jovkub gravatar image Jovkub
1 1

updated 2016-04-08 21:03:09 +0800

I have a problem, I need a scrollable tree with multiple columns that has dynamic height. I've found two solutions, but none of them is perfect. 1) defining number of rows in tree element. That works OK - header is static and content is scrolled, but this is not dynamic tree. 2) stetting style="overflow-y:auto" on tree element that but that scrolls whole tree (including header) and she scrollbar is placed over the header - so the label is partially unreadable.

Something tells me that some smart JS can calculate the rows attribute (but I wonder if there is some better way to do it). I'd like to upload some screen shots of the example but my Karma is to low.

example fiddle


Thanks for any ideas.

delete flag offensive retag edit


Can you create fiddle for seconden option? I maybe have an idea. Just paste link as text.

chillworld ( 2016-04-08 19:42:59 +0800 )edit

Example added, i have low Karma so link is only textual.

Jovkub ( 2016-04-08 21:01:52 +0800 )edit

2 Answers

Sort by ยป oldest newest most voted

answered 2016-04-11 05:28:37 +0800

chillworld gravatar image chillworld flag of Belgium
5337 4 9

Hey Jovkub,

I altered a little bit your sample :


Look at the right one.

Now, looks like I discovered a small GUI issue of ZK. height="100% seems it counts for z-tree-body but he don't calculate the z-tree-header height with it.
That's why I needed it to fix with setting the same height as the parent object.

With MVVM you can make this dynamic => height="@load(vm.treeHeight)" (in div and tree)
Then in the VM you just have a getter :

public String getTreeHeight() {
   return treeHeight; // where treeHeight = "135px"

Hope this can help you further.
If any more questions, just ask.

Greetz Chill.

link publish delete flag offensive edit

answered 2016-04-11 10:04:10 +0800

Jovkub gravatar image Jovkub
1 1

After some playing with trees I've found that vflex instead height shall be used on tree element. Now it works like charm.


link publish delete flag offensive edit


lol, I was assuming that you had to set your height manually(depending on some configs). Vflex works as a charm indeed.

chillworld ( 2016-04-11 11:38:23 +0800 )edit

My bad, I wasn't so clear, but thanks for help.

Jovkub ( 2016-04-11 13:39:16 +0800 )edit
Your answer
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

1 follower



Asked: 2016-04-08 14:41:24 +0800

Seen: 18 times

Last updated: Apr 11 '16

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