This is a migrated thread and some comments may be shown as answers.
Treeview flexbox
2 Answers 8 Views
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 24 Jan 2018, 11:01 PM

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 Answers, 1 is accepted

Sort by
0
Accepted
Ivan Zhekov
Telerik team
answered on 29 Jan 2018, 09:05 AM
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.
0
David
Top achievements
Rank 1
answered on 29 Jan 2018, 01:12 PM
Perfect! Thank You!
Asked by
David
Top achievements
Rank 1
Answers by
Ivan Zhekov
Telerik team
David
Top achievements
Rank 1
Share this question
or