Misalignment with frozen columns

[pierfreeman]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

The issue was marked as solved and closed here: #5485 but it still persists for version 6.1.4, as also the table in the docs shows:

The problem is the scrollbar, it should appear outside the table border, and not inside.

EDIT: the bug persists with Google Chrome. With Firefox it seems ok, despite of a weird animation on the headers during the scroll

[JacobSiegle]

I don't think your issue is the same bug as #5485 but is related. In #5485 the table would always render incorrectly. In the newer versions it only renders incorrectly when resizing happens. Maybe you can retest and see if that is the case for you also, because you mentioned Firefox works but it's not working correctly for me when resizing. Both Firefox and Chrome do work correctly first render.

[pierfreeman]

Yes you are right, if I resize the window and then refresh the page, the table is rendered correctly. At least, on the primeNg doc website.

The table in my application still renders wrongly even at the first time with Chrome (you may not see the misaligned due to the dark colors, but there is):

With Firefox, everything is good, both at first render and after a window resize.

[nikpundik]

About resizing or data changes, could it be related to this line in ngAfterViewChecked? Wrapping it in a setTimeout function updates height correctly

primeng/src/app/components/table/table.ts

Line 1888 in f29be5a

this.setScrollHeight();

[JacobSiegle]

1 - It's checking the view width because if the width is larger then the scroll container that means a scroll bar will exist on the bottom and if a scroll bar exists on the bottom it needs to offset the height to match up with the unfrozen part.

2 - Looking at ngAfterViewChecked I see it checks a var called initialized. When initialized is set setScrollHeight is not being called again. The issue with the responsiveness is that it needs to call setScrollHeight when the view changes since it possibly cannot have a scrollbar anymore. They have something similar to the needed call in the file where they are subscribing to col changes and running setScrollHeight.

I don't know if fixing either of those will fix whatever is wrong with pierfreeman table because the primeNG docs example seem to work in the scenario he's saying his doesn't. I think we would need a stackblitz to look into why his doesn't work.

If you would like to try to PR a fix you can, I don't like PRing for turbo table.

[JacobSiegle]

It also seems like if the table is hidden (maybe you show a loading screen) the scrollbar will be misaligned, wild guess that's pierfreeman issue.

[cagataycivici]

I can't replicate this, I've merged @JacobSiegle's PR although not sure if it is related. Provide a stackblitz template please.

[JacobSiegle]

Edit: Seems latest master is same as below I ran for 6.1.4.

1. https://www.primefaces.org/primeng/#/table/scroll
2. Go to the table labeled "Frozen Columns".
3. Maximize your screen until the table frozen column has no scroll bar.
4. Scroll the entire table confirm all the rows line up.
5. Shrink the screen until the scrollbar appears.
6. Scrollbar should be misaligned on the table.
7. Reload the webpage at the same width
8. Scroll to the table again and see the scrollbar now works properly.
9. Maximize the table again until the scrollbar vanishes
10. Confirm the LHS frozen column is misaligned.

[Calidus]

I am using a p-table with frozen columns inside of a CSS grid area defined with fractions and I am running into this same issue with Chrome. I made a stackblitz.

https://stackblitz.com/edit/angular-ac3uzz

[Calidus]

This issues is still present in 7.0

[jpierrep]

same problem in version 7.0 at 2018-dec

[filoberlini]

there is a little error in table.ts:

this.scrollBodyViewChild.nativeElement.style.marginBottom = this.domHandler.calculateScrollbarWidth() + 'px';

this piece of code should be instead

this.scrollBodyViewChild.nativeElement.style.paddingBottom = this.domHandler.calculateScrollbarWidth() + 'px';

[Relic]

Can confirm what @filoberlini said. I am using version 7.0.3.

Changing the style of the frozen table's ui-table-scrollable-body from using margin-bottom to using padding-bottom fixes this misalignment issue (and some other weird scrollbar/alignment issues I was running into).

The exact location he referenced in the source is table.ts:2235.

A temporary workaround which worked for me was to inject DOCUMENT from @angular/common into the component, select .ui-table-frozen-view > .ui-table-scrollable-body and manually set style["paddingBottom"] = style["marginBottom"] and style["marginBottom"] = "unset" for the resulting selected elements in AfterViewInit.

[NickolayMitev]

A temporary workaround which worked for me was to inject DOCUMENT from @angular/common into the component, select .ui-table-frozen-view > .ui-table-scrollable-body and manually set style["paddingBottom"] = style["marginBottom"] and style["marginBottom"] = "unset" for the resulting selected elements in AfterViewInit.

@Relic can you give an example ?

[Relic]

@NickolayMitev

I was mistaken above - you don't even have to inject DOCUMENT into the component. That injection is used in serverside rendering.

This is all it took for me in the end:

ngAfterViewInit() {
    const frozenBodyStyle = document.querySelector(".ui-table-frozen-view > .ui-table-scrollable-body")["style"];
    if (frozenBodyStyle["marginBottom"] !== "unset") {
        frozenBodyStyle["paddingBottom"] = frozenBodyStyle["marginBottom"];
        frozenBodyStyle["marginBottom"] = "unset";
    }
}

[nikpundik]

Correct me if I'm wrong, but it seems that the problem is located here

primeng/src/app/components/table/table.ts

Line 2385 in 9cb6da5

this.scrollBodyViewChild.nativeElement.style.maxHeight = this.scrollHeight;

It's also happening in the stackblitz posted by @Calidus
When setScrollHeight is called with this.frozen and this.scrollableSiblingBody existing, it misses the first branch because of this check this.domHandler.getOuterWidth(this.scrollableSiblingBody) < this.domHandler.getOuterWidth(this.scrollableSiblingBody.children[0] (inside table is not greater than its container). If we try to call this function with a timeout setTimeout(() => this.setScrollHeight(), 500); in

primeng/src/app/components/table/table.ts

Line 2232 in 9cb6da5

this.setScrollHeight();

it returns the correct outer width for the inner table (so that it can subtract the scrollbar width from the maxHeight) and it gets displayed correctly.

Any idea on why is not getting the correct width at the first call? (it turns out that the table width is exactly the same as its container)

[JacobSiegle]

The fix only solves problems with the first render, which probably covers most issues. It does not fix scrollbars appearing / disappearing when using a responsive website.

First render -

Opening a row to make the table have vertical scroll causes the RHS scrollbar to overlap the data -

Resizing the columns to fit the screen causes extra space to exist on the bottom of the table when the horizontal scrollbar is removed -

[JacobSiegle]

My previous comment is incorrect. First render is broken in a different way. First render fails when you have a scrollable table that happens to not scroll due to lack of rows. The padding is always put onto the bottom of the table no matter what.

[JobayerAhmmed]

@NickolayMitev

ngAfterViewInit() {
    const frozenBodyStyle = document.querySelector(".ui-table-frozen-view > .ui-table-scrollable-body")["style"];
    if (frozenBodyStyle["marginBottom"] !== "unset") {
        frozenBodyStyle["paddingBottom"] = frozenBodyStyle["marginBottom"];
        frozenBodyStyle["marginBottom"] = "unset";
    }
}

The code within ngAfterViewInit() didn't work for me. My table shows large amount of data (~15MB). So I added the following code after fetching data, not in ngAfterViewInit() and it worked.

          setTimeout(() => {
            let frozenBody = document.querySelector(".ui-table-frozen-view > .ui-table-scrollable-body");
            if (frozenBody) {
              let frozenBodyStyle = frozenBody["style"];
              if (frozenBodyStyle["marginBottom"] !== "unset") {
                frozenBodyStyle["paddingBottom"] = frozenBodyStyle["marginBottom"];
                frozenBodyStyle["marginBottom"] = "unset";
              }
            }
          }, 0);

[MdShahrukh]

When i am trying to use virtual scrollbar with frozen columns it is giving two scrollbars on both sides frozen side and scroll side as well.
Can anyone help me here ?

Attaching stackbiz https://stackblitz.com/edit/primeng-treetablescroll-demo-s5ckqt?file=src%2Fapp%2Fapp.component.html