This is a migrated thread and some comments may be shown as answers.

Treeview flexbox

2 Answers 137 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

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>

2 Answers, 1 is accepted

Accepted