In my sample code, I'm trying to make a toolbar (red), a grid (yellow) and a footer (blue).
I can't make the grid flex to fill the space between the toolbar and the footer, so in my result I can't see the footer.
Here's my sample code:
var data = [];
var colorEditor = null;
var hexEditor = null;
var hexHasKeyPress = false;
$(document).ready(function() {
var grid = $("#grd")
.dxDataGrid({
dataSource: generateData(1000),
showBorders: true,
customizeColumns: function(columns) {
columns[0].width = 70;
},
loadPanel: {
enabled: false,
},
scrolling: {
mode: "infinite",
},
sorting: {
mode: "none",
},
height: "100%",
})
.dxDataGrid("instance");
});
var s = 123456789;
var random = function() {
s = (1103515245 * s + 12345) % 2147483647;
return s % (10 - 1);
};
var generateData = function(count) {
var i;
var surnames = ["Smith", "Johnson", "Brown", "Taylor", "Anderson", "Harris", "Clark", "Allen", "Scott", "Carter"];
var names = ["James", "John", "Robert", "Christopher", "George", "Mary", "Nancy", "Sandra", "Michelle", "Betty"];
var gender = ["Male", "Female"];
var items = [],
startBirthDate = Date.parse("1/1/1975"),
endBirthDate = Date.parse("1/1/1992");
for (i = 0; i < count; i++) {
var birthDate = new Date(startBirthDate + Math.floor((random() * (endBirthDate - startBirthDate)) / 10));
birthDate.setHours(12);
var nameIndex = random();
var item = {
id: i + 1,
firstName: names[nameIndex],
lastName: surnames[random()],
gender: gender[Math.floor(nameIndex / 5)],
birthDate: birthDate,
};
items.push(item);
}
return items;
};html {
height: 100%;
}
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
padding-bottom: 10px;
}
.wrapper {
display: flex;
align-items: stretch;
height: 100%;
flex-direction: column;
}
.toolbar {
height: 40px;
min-height: 40px;
background-color: red;
}
.grid {
flex: 1;
background-color: yellow;
max-height: 100%;
}
.footer {
height: 40px;
min-height: 40px;
background-color: blue;
}<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.min.js"></script>
<script src="https://cdn3.devexpress.com/jslib/20.2.7/js/dx.all.js"></script>
<link href="https://unpkg.com/devextreme@20.2-next/dist/css/dx.common.css" rel="stylesheet" />
<link href="https://unpkg.com/devextreme@20.2-next/dist/css/dx.light.compact.css" rel="stylesheet" />
</head>
<body>
<div class="wrapper">
<div class="toolbar">123</div>
<div class="grid">
<div id="grd" class=""></div>
</div>
<div class="footer">123</div>
</div>
</body>
</html>Any idea how I can have the red toolbar at top, the blue footer at bottom and then have the yellow grid fill the rest - and the grid must NOT expand.
