Treeview flexbox

3 posts, 1 answers
  1. David
    David avatar
    2 posts
    Member since:
    May 2017

    Posted 24 Jan Link to this post

    I'm trying to get a treeview to just fill available space in the browser window. Meaning the vertical scrollbar on the treeview should be displayed and the vertical scrollbar on the browser window should not. I am using flexbox and it works perfectly in Firefox and Edge, but the TreeView overwrites my footer in Chrome and the entire TreeView is shown. Any help would be appreciated. I don't understand why the difference in functionality between the browsers. I would have expected Chrome and Firefox to behave the same.

    <style>
     
            html,
            body {
                height: 100%;
                margin: 10px;
                padding:0;
            }
     
            .box {
                display: flex;
                flex-flow: column;
                height: 100%;
            }
     
                .box .row {
                    border: 1px dotted grey;
                }
     
                    .box .row.header {
                        -webkit-flex: 0 1 auto;
                        -ms-flex: 0 1 auto;
                        flex: 0 1 auto;
                    }
     
                    .box .row.content {
                        -webkit-flex: 1 1 auto;
                        -ms-flex: 1 1 auto;
                        flex: 1 1 auto;
                    }
     
                    .box .row.footer {
                        -webkit-flex: 0 0 40px;
                        -ms-flex: 0 0 40px;
                        flex: 0 0 40px;
                    }
     
     
     
     
            /*
                      Use the DejaVu Sans font for display and embedding in the PDF file.
                      The standard PDF fonts have no support for Unicode characters.
                  */
            .k-treelist {
                font-family: "DejaVu Sans", "Arial", sans-serif;
                font-size: .9em;
                height: 98%;
            }
        </style>
    </head>
    <body>
        <div class="box">
                <div class="row header"><h1 class="text-center">Component Configuration Report</h1></div>
                <div class="col-md-12 pull-left row content">
                    <span id="popupNotification"></span>
                    <div id="treelist" class="row content"></div>
                </div>
                <div class="row footer">
                    <p>footer</p>
                </div>
     
            </div>
  2. Answer
    Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    646 posts

    Posted 29 Jan Link to this post

    Hello, David.

    There were a couple of things missing in order to get the desired result: namely, you need to tell the treeview to show scroll at some point and I've done precisly that, by adding "overflow: auto" on the content row.

    I've created a simple snippet: https://dojo.telerik.com/@joneff/iCAQe.

    Regards,
    Ivan Zhekov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. David
    David avatar
    2 posts
    Member since:
    May 2017

    Posted 29 Jan in reply to Ivan Zhekov Link to this post

    Perfect! Thank You!
Back to Top