Hi,
on PrimeReact 5.0.1 with Utlima Template
In order to make datatable responsive, I follow PrimeReact instruction https://primefaces.org/primereact/show ... responsive, and everything work perfectly, but when I enable scrollable option, datatable column width is not full in mobile mode as you can see in below picture.
I tried to customize css but failed to resolve this issue, I'll be very thankfull for any advice or tips to resolve this.
DataTable Responsive Scrollable
-
- Posts: 35
- Joined: 11 Nov 2016, 13:11
Last edited by Ibrahim Siripe on 05 Nov 2020, 12:30, edited 2 times in total.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi,
Could you please re-attach your screenshot or add a link?
Best Regards,
Could you please re-attach your screenshot or add a link?
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Posts: 35
- Joined: 11 Nov 2016, 13:11
Hi mert.sincan,mert.sincan wrote: ↑05 Nov 2020, 04:01Hi,
Could you please re-attach your screenshot or add a link?
Best Regards,
picture re-upload, you can see it now in my previous message.
Thank you very much
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi,
Thanks a lot for the screenhot! Unfortunately, Ultima theme is not compatible with 5.x version for now. We're working on it. We'll get back to you with the new Ultima release asap.
Also, please see our demo that includes custom css;
https://primefaces.org/primereact/showc ... responsive
Best Regards,
Thanks a lot for the screenhot! Unfortunately, Ultima theme is not compatible with 5.x version for now. We're working on it. We'll get back to you with the new Ultima release asap.
Also, please see our demo that includes custom css;
https://primefaces.org/primereact/showc ... responsive
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Posts: 3
- Joined: 24 Jun 2021, 01:53
I went through the same problem, and I'm not using the indicated theme.
The real problem is in the way PrimeReact formats columns when scrollable is enabled, it uses the colgroup tag and puts width [0-100]%.
To work around the problem, just create two css blocks, the first to leave all cells with width = 0 and the other to leave only the first cell with width = 100%
The real problem is in the way PrimeReact formats columns when scrollable is enabled, it uses the colgroup tag and puts width [0-100]%.
To work around the problem, just create two css blocks, the first to leave all cells with width = 0 and the other to leave only the first cell with width = 100%
Code: Select all
.datatable-responsive-demo .p-datatable-scrollable-colgroup col{
width: 0 !important;
}
.datatable-responsive-demo .p-datatable-scrollable-colgroup col:first-child{
width: 100% !important;
}
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest