DataGrid: Is grid-layout with 4-2-1 columns possible?

Components, Ajax Framework, Utilities and More.
Post Reply
RueKow
Posts: 304
Joined: 21 Jun 2011, 23:34
Location: Germany - Wiesbaden

17 May 2017, 15:05

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?
Rüdiger

PrimeFaces 6.1 | PrimeFaces Extensions 6.0 | Ultima 1.0.7
Mojarra 2.2 | Tomcat 8 | Eclipse | IE | Firefox | Chrome | Safari | Win7 | OS X 10.8

liamhenry21
Posts: 1
Joined: 18 May 2017, 07:24

18 May 2017, 07:41

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).

RueKow
Posts: 304
Joined: 21 Jun 2011, 23:34
Location: Germany - Wiesbaden

19 May 2017, 07:25

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;
	}
}
Rüdiger

PrimeFaces 6.1 | PrimeFaces Extensions 6.0 | Ultima 1.0.7
Mojarra 2.2 | Tomcat 8 | Eclipse | IE | Firefox | Chrome | Safari | Win7 | OS X 10.8

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 12 guests