datatable vertical scroll, with fixed column widths

Forum rules
Please note that response time for technical support is within 3-5 business days.
User avatar
undermensch
Posts: 140
Joined: 08 Jul 2010, 14:37
Location: Florida, United States

26 Jun 2018, 19:28

If the datatable is scrollable and one or more column widths have been set, the table header column widths don't match up.
PrimeFaces-11.0.6 / Wildfly 24

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

28 Jun 2018, 09:01

I think it is not a Harmony Layout or Theme issue. Please use core forum; viewforum.php?f=3
Could you please try it without Harmony?

Also, maybe you can try tableStyle="table-layout:auto" or tableStyle="width:auto" on DataTable.

User avatar
undermensch
Posts: 140
Joined: 08 Jul 2010, 14:37
Location: Florida, United States

28 Jun 2018, 14:41

The problem was not present when I had Ultima theme installed. It appeared when I switched to harmony. I just switched to cupertino to check. It worked fine with cupertino, but when I switched to Harmony, the problem returned. I changed no markup, just the themes. I should add that the problem occurs regardless of whether any column widths are set. Just set scrollable= true and the issue occurs.

Image
Image

Thanks
PrimeFaces-11.0.6 / Wildfly 24

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

28 Jun 2018, 16:05

Thanks a lot for the screenshot. Could you please try the following css?

Code: Select all

.ui-datatable-scrollable-header *,
.ui-datatable-scrollable-theadclone * {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

User avatar
undermensch
Posts: 140
Joined: 08 Jul 2010, 14:37
Location: Florida, United States

28 Jun 2018, 16:57

That makes things much better. The alignment is still off very slightly compared with cupertino.

Image

Thanks
PrimeFaces-11.0.6 / Wildfly 24

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

04 Jul 2018, 09:06

Could you please try the following css code?

Code: Select all

.ui-datatable-scrollable-header *,
.ui-datatable-scrollable-theadclone * {   
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

body .ui-datatable .ui-datatable-scrollable-body::-webkit-scrollbar {
    width: 15px;
}

User avatar
undermensch
Posts: 140
Joined: 08 Jul 2010, 14:37
Location: Florida, United States

05 Jul 2018, 14:50

That seems to be the magic sauce! The header and table columns now seem perfectly aligned.

Image

Thanks.
PrimeFaces-11.0.6 / Wildfly 24

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

06 Jul 2018, 09:11

Glad to hear, thanks a lot for the update!

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

29 Aug 2018, 13:46

We'll have this fixed in next maintenance release as well.

slauf82
Posts: 1
Joined: 31 Jan 2019, 13:34

30 Oct 2020, 14:52

what about the problem if the columns are more than in the given size can be printed ?
in this case a horizontal scroll bar is rendered on the bottom of the table
and if you scroll to the other columns the sticky header will not refresh !

so it doesn't make sense to use the sticky header when you have more columns than all that can be printed !
Please fix this !

Post Reply

Return to “Harmony - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests