Page 1 of 1
DataGrid: Is grid-layout with 4-2-1 columns possible?
Posted: 17 May 2017, 15:05
by RueKow
I have a responsive DataGrid with 4 columns. It depends on screen width (approximately 640px) when DataGrid is switching from 4 to 1 column. My intention is, depending on screen width, first to switch from 4 to 2 columns and then from 2 to 1 column.
Is that possible with DataGrid?
Can I change CSS by using media queries?
Is it possible to integrate a data list to Grid CSS?
Re: DataGrid: Is grid-layout with 4-2-1 columns possible?
Posted: 18 May 2017, 07:41
by liamhenry21
A total of nine buttons, each placed in his own cell in a grid containing three rows and three columns. Again we use a star-based system on a wide scale, but this time we customize the number too - the first row and the first column have a width of 2 *, which basically means that it uses twice as much space as rows and columns with 1 * - himself).
Re: DataGrid: Is grid-layout with 4-2-1 columns possible?
Posted: 19 May 2017, 07:25
by RueKow
Changing dataGrid style classes with media queries makes it working as requested.
Code: Select all
.ui-grid-row {
display: flex;
flex-wrap: wrap;
}
Code: Select all
@media screen and (max-width: 640px) {
.ui-datagrid-column {
width: 100% !important;
}
}
@media screen and (min-width: 641px) and (max-width: 1024px) {
.ui-datagrid-column {
width: 50% !important;
}
}
@media screen and (min-width: 1025px) {
.ui-datagrid-column {
width: 25% !important;
}
}