TreeView Dynamic Size Scroll

[Emin Inam]

I have a tree View with hierarchical data source which is located left side of the screen. The size of hierarchical data source is not known and it can overflow the page.

I want to scroll only treeView(not the whole page) and I can do it like that:

#treeView{

overflow-y: scroll;

height: 800px;

}

.html{

overflow: hidden;

}

 

However my code will be run several devices and I do not want to give a division static height. Is there a way to give height to a division after doing some calculations?

[Magdalena]

Hello Emin,

You can use flex-box approach to expand the treeView widget to the remain height. Applying this approach you should expand all treeview parents to the entire height, by height:100%, or by flex-box as well.

The other option is to calculate the treeview height by CSS calc() function. This approach can be applied only if other elements, that are above or below treeview have a static height. We are sending you this descriptive image. So the CSS rule will be as the following:

#treeView {
    height: calc(100vh - 60px);
}

Do not hesitate to contact us if you have other questions.

Regards,
Magdalena
Telerik by Progress