TreeView Dynamic Size Scroll

2 posts, 0 answers
  1. Emin Inam
    Emin Inam avatar
    6 posts
    Member since:
    Oct 2004

    Posted 24 Jan Link to this post

    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:


    overflow-y: scroll;

    height: 800px;



    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?

  2. Magdalena
    Magdalena avatar
    463 posts

    Posted 25 Jan Link to this post

    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.

    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top