Dear friends I have a datatable with 12 column. The reflow=true solution is good only if I use phone device, with tablets device it doesn't work as you can see in the image. The priority solution is not good because I have filters and paginator.
So my question is : Is possible with modena to exclude some columns with responsive mode ? Something with CSS or other ?
[SOLVED] Datatable exclude columns in responsive mode
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
What is the resolution of the tablet?
Suggestions;
First way) You can change max-width of @media (Default: 35em).
You can add this code in your project.
Second way) You can try with priority attribute. Exp; you have 4 column in datatable and If you want to show 3 column on tablet device, you can add priority (according to resolution value of your tablet) in one of the column.
in PrimeFaces-5.2.x and 5.3
Third way) You can try with tableStyle="table-layout:auto". (scroll on PC and tablet, responsive design on mobile) (you can change as the first way on PC and table)
Suggestions;
First way) You can change max-width of @media (Default: 35em).
You can add this code in your project.
Code: Select all
@media ( max-width: 650px ) { /* Default 35em */
.ui-datatable-reflow thead th,
.ui-datatable-reflow tfoot td {
display: none;
}
.ui-datatable-reflow .ui-datatable-data td {
text-align: left;
display: block;
border: 0px none;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
clear: left;
}
.ui-datatable-reflow .ui-datatable-data.ui-widget-content {
border: 0px none;
}
.ui-datatable-reflow .ui-datatable-data tr.ui-widget-content {
border-left: 0px none;
border-right: 0px none;
}
.ui-datatable-reflow .ui-datatable-data td .ui-column-title {
padding: .4em;
min-width: 30%;
display: inline-block;
margin: -.4em 1em -.4em -.4em;
}
}
Code: Select all
<p:column>..</p:column>
<p:column>..</p:column>
<p:column>..</p:column>
<p:column priority="6">..</p:column>
Code: Select all
/* Show priority 1 at 320px (20em x 16px) */
@media screen and (min-width: 20em) {
th.ui-column-p-1,
td.ui-column-p-1 {
display: table-cell;
}
}
/* Show priority 2 at 480px (30em x 16px) */
@media screen and (min-width: 30em) {
th.ui-column-p-2,
td.ui-column-p-2 {
display: table-cell;
}
}
/* Show priority 3 at 640px (40em x 16px) */
@media screen and (min-width: 40em) {
th.ui-column-p-3,
td.ui-column-p-3 {
display: table-cell;
}
}
/* Show priority 4 at 800px (50em x 16px) */
@media screen and (min-width: 50em) {
th.ui-column-p-4,
td.ui-column-p-4 {
display: table-cell;
}
}
/* Show priority 5 at 960px (60em x 16px) */
@media screen and (min-width: 60em) {
th.ui-column-p-5,
td.ui-column-p-5 {
display: table-cell;
}
}
/* Show priority 6 at 1,120px (70em x 16px) */
@media screen and (min-width: 70em) {
th.ui-column-p-6,
td.ui-column-p-6 {
display: table-cell;
}
}
Third way) You can try with tableStyle="table-layout:auto". (scroll on PC and tablet, responsive design on mobile) (you can change as the first way on PC and table)
Code: Select all
<p:dataTable reflow="true" tableStyle="table-layout:auto">
Github Profile: https://github.com/mertsincan
Thanks for your reply. I've tested 2 of 3 way you suggest.
1) WAY
I added this code in my xhtml page :
and the result on my Samsung Galaxy Tab 3 is the follow :
The result is better than before but it's not what i'm looking for. (Maybe I have to add theese css rules to my core-layout.css file to have something of useful ? )
2)WAY:
For the second way I know that if I have some filters and paginator, the priority tag doesn't work ( i'm using PF 5.2.9 because from this version to newer <pe:inputNumber> doesn't work )
this is my previous post on it : http://forum.primefaces.org/viewtopic.php?f=3&t=43207
3) WAY
This solution is the best for me at the moment. As you can see, it truncate the column but with a swype on the left on my tablet i can see all the columns. Very appreciate and simple to implement.
1) WAY
I added this code in my xhtml page :
Code: Select all
<style type="text/css">
@media ( max-width: 650px ) { /* Default 35em */
.ui-datatable-reflow thead th,
.ui-datatable-reflow tfoot td {
display: none;
}
.ui-datatable-reflow .ui-datatable-data td {
text-align: left;
display: block;
border: 0px none;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
clear: left;
}
.ui-datatable-reflow .ui-datatable-data.ui-widget-content {
border: 0px none;
}
.ui-datatable-reflow .ui-datatable-data tr.ui-widget-content {
border-left: 0px none;
border-right: 0px none;
}
.ui-datatable-reflow .ui-datatable-data td .ui-column-title {
padding: .4em;
min-width: 30%;
display: inline-block;
margin: -.4em 1em -.4em -.4em;
}
}
</style>
The result is better than before but it's not what i'm looking for. (Maybe I have to add theese css rules to my core-layout.css file to have something of useful ? )
2)WAY:
For the second way I know that if I have some filters and paginator, the priority tag doesn't work ( i'm using PF 5.2.9 because from this version to newer <pe:inputNumber> doesn't work )
this is my previous post on it : http://forum.primefaces.org/viewtopic.php?f=3&t=43207
3) WAY
This solution is the best for me at the moment. As you can see, it truncate the column but with a swype on the left on my tablet i can see all the columns. Very appreciate and simple to implement.
Netbeans 8.1, PrimeFaces 5.3.10 + PrimeFaces Extensions 4.0, Glassfish ver4.1, Chrome with NetbeansPlugin
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Thanks for the update.
1) Maybe you can try after changing @media ( max-width: 650px ). (650px is a sample value for my test)
We use this @media queries for Layouts;
3) I agree with you.
1) Maybe you can try after changing @media ( max-width: 650px ). (650px is a sample value for my test)
We use this @media queries for Layouts;
Code: Select all
/* MEDIA QUERIES FOR CORE LAYOUT **************************************************************************************************************** */
/* Large desktop */
@media (min-width: 960px){
}
@media (min-width: 960px) and (max-width:1200px){
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 640px) and (max-width: 960px) {
}
/* Landscape phone to portrait tablet */
@media (min-width:480px) and (max-width: 640px) {
}
/* Portrait phones and down */
@media (min-width:320px) and (max-width: 480px) {
}
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 4 guests