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
0
Accepted
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
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
Rank 1
answered on 29 Jan 2018, 01:12 PM
Perfect! Thank You!