Scrolling to the right end results in shift between header and body

[AnneLaureF]

When reaching the right end of the grid the header columns and the data columns are not properly aligned. See for example on the homepage:

I suspect this example shouldn't scroll (and the one below definitely shouldn't).

It seems the header row and the grid have the same canvas width and the same viewport width but the grid has the vertical scrollbar.

It doesn't happen in commit d9b2314 so it's been introduced after that. Maybe the scrollbar width was added to the grid canvas width somewhere and it should have been removed when changing the way scroll works ?

[PaulL1]

There were some substantial changes went into scrolling yesterday, which should have fixed some of these issues (or perhaps they newly created this?). Could you perhaps check again?

[axelstudios]

This still exists, and was introduced with the 30df7d4 merge, which also appears to have broken both enableHorizontalScrollbar: uiGridConstants.scrollbars.NEVER and enableVerticalScrollbar: uiGridConstants.scrollbars.NEVER.

Similarly, the vertical row selection header is now misaligned when you scroll all the way to the bottom.

http://plnkr.co/edit/juFzMptmHdOLky9jlPzU?p=preview

[AnneLaureF]

Just confirming the issue is still present in 97dbff8

[herdanskecommodities]

I am still seeing this with the latest unstable.

[kencaron]

@axelstudios I'm not positive this was introduced with 30df7d4 (Jan 8) if only because I'm still on RC18 (Dec 9) and I'm noticing this same misalignment. Possibly there are multiple causes of the issue.

In my case it would only appear when the user horizontally scrolled the grid due to large datasets. My misalignment was solved when I assigned a class with a width to my ui-grid element.

[axelstudios]

For me, this bug is gone with the latest unstable.

[c0bra]

This bug still exists for me with latest unstable and rc19.

[c0bra]

@kencaron Can't have been 30df7d4; the only changes there are syntax and whitespace alterations for a merge commit.

[c0bra]

@sachinny21 OK I'll take a look

[sachin-bs]

thanks cobra!

[kencaron]

Not sure how helpful this is as I can't reliably reproduce this. Started removing columns when the width of the grid was wider than the containing div.

RC20 in Firefox 35 on OS X 10.10.2

[c0bra]

@sachinny21 I'm not seeing this behavior on my test grid:

Can you double-check it?

[morungos]

I'm still seeing something like this in 1fdcf3d in current master, although the behaviour for me is different. I have a lot of columns, and as I scroll, periodically entire headers vanish and leave with fewer headers than columns. Not sure if this is identical in cause: I'll see if I can pin down the commit as it wasn't there in rc16.

[morungos]

Okay, the issue I've seen is in 893bb13 (fix(uiGridHeader): Fix dynamic header heights), and therefore it isn't the same. Taking a wild guess, it's the lines which take away the min-height constraint on header cells allowing them to collapse away entirely when there are too many to fit. I'll try to build a small example to demonstrate.

[c0bra]

@morungos Any luck on making that example? Can you tell me if you're having issues in a particular browser. I know that table-based CSS can be a bit wonky between different browsers and versions.

[morungos]

@c0bra Sadly no -- my app is in healthcare, so I just didn't get time to remove all the bits I needed to, and there were too many weird requests from my users to sustain with the current status of ui-grid, so I've switched for now to handsontable for now, which isn't as clean an API but does seem to handle the basic UI/scrolling/editing well, if without the scalability I'll need some day.

[c0bra]

Ah, I understand. Thanks for the info on this issue, though. I'll look into the column collapsing thing.

[c0bra]

Since there have been so many changes to scrolling recently I'm going to close this as the only thing left was a difficult-to-repro column collapsing issue. If it's still a problem after the scrolling changes I trust it will be filed again.

[ghost]

I thought this was completely gone until I received screenshots of this on IE9. Really can't blame anyone for not wanting to deal w/ that browser though.

[jtpolizzi]

I'm having this exact issue in IE9. It is the same in 20 and 21.

It seems to work fine when only a few columns are displayed - but has problems when there are more and it has to scroll

[bernhard-hofmann]

I see the issue in IE9 when I set the column width narrower than the text of the heading will allow. Chrome is fine with the text-overflow:ellipsis but IE9 (which technically supports this overflow) doesn't show the text with ellipses and (I'm guessing) therefore pushes the column heading width out which then doesn't align with the data column.

Some detail (it might help):
It's the <div class="ui-grid-cell-contents" col-index="renderIndex"> that differs in width. The heading text in a span is set to auto width on both Chrome and IE9. In IE9 the span that shows the sort direction is not hidden as a result of the column being too narrow whereas it is hidden in Chrome.

Setting the width on the div with class ui-grid-header-cell has no effect in IE9, but setting it on the child div which has the classes ng-scope sortable results in the expected behaviour.

Sadly I'm in "git 'er done" mode so I just need to make it work. Maybe someone else is and will find this helpful. Without a doubt I will suffer in Hell for this.
$('.ui-grid-coluiGrid-004').children().first().css({ 'width': '60px' });

[kencaron]

@bernhard-hofmann after re-reading @c0bra's comment, it might be necessary to open a new issue for this IE9 issue to be considered. Not sure the policy on reopening closed issues.

[nitoloz]

Reproduced with 3.0.7

[amex132]

We have a requirement that some of our webapps allow a reasonable amount of zoom in and zoom out say like from 80% to 150% in a browser window. We're seeing this behavior on browser zoom in/out.

Meaning alignment between column header and body gets worse towards the right end.

I believe we're also using 3.0.7.

Thanks for your efforts with ui-grid. Very much appreciated.

[gabrielsantana-git]

I had the same issue in IE9 and i Solve Setting the same width of the title like width the collum.

If the width of the collum was less than width of the size of the title the problem occours in ie9.

[siva563]

Still i am facing the issue @c0bra

[pradapkumar]

I have the same issue, I have the latest release 3.2.6
can any one suggest how to fix this Header and data misalignment?

[gabrielsantana-git]

The width of your collum has to have the size of your title. If your value is lowwer the problem occours.
{
field: "TipoSolicitacao",
name: "Tp. Solicit",
width: "10%"
},
{
field: "Documento",
name: "Documento",
width: "15%"
},

[antonio91kim]

Hope everyone can solve this problem with this tip.
my idea is making an empty box beside last column header.

First, add class on last column header when vertical scrollbar needed.
This code should be executed on gridApi.core.on.renderingComplete event.

// if horizontal scrollbar needed, add class on last column
if (gridApi.grid.options.data.length > 7)
  gridApi.grid.options.columnDefs[gridApi.grid.options.columnDefs.length - 1].headerCellClass = 'include-scrollbar';

And add below lines on style sheet. Assume that scroll width is 20px.

.ui-grid-header-cell.include-scrollbar:last-child .ui-grid-cell-contents {
  margin-right: -20px;
  padding-right: 20px;
}

[deepaksm1]

Same issue I faced in Kendo Grid, solved using this trick:- http://www.letmeknows.com/2017/03/07/header-and-column-data-mis-aligned-after-implementing-in-kendo-grid