Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
AnneLaureF opened this issue Jan 9, 2015 · 30 comments
Closed
Assignees
Milestone

Comments

@AnneLaureF
Copy link

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:
image
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
Copy link
Contributor

PaulL1 commented Jan 10, 2015

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?

@PaulL1 PaulL1 added this to the 3.0 milestone Jan 10, 2015
@axelstudios
Copy link

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
Copy link
Author

Just confirming the issue is still present in 97dbff8

@herdanskecommodities
Copy link

I am still seeing this with the latest unstable.

@kencaron
Copy link
Contributor

kencaron commented Feb 4, 2015

@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
Copy link

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

@c0bra
Copy link
Contributor

c0bra commented Feb 16, 2015

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

@c0bra
Copy link
Contributor

c0bra commented Feb 16, 2015

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

@c0bra c0bra closed this as completed in cf86090 Feb 16, 2015
@c0bra c0bra self-assigned this Feb 19, 2015
@c0bra c0bra reopened this Feb 19, 2015
@c0bra
Copy link
Contributor

c0bra commented Feb 19, 2015

@sachinny21 OK I'll take a look

@sachin-bs
Copy link

thanks cobra!

@kencaron
Copy link
Contributor

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
Copy link
Contributor

c0bra commented Mar 11, 2015

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

no_gap_grid

Can you double-check it?

@morungos
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

c0bra commented Mar 30, 2015

@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
Copy link
Contributor

@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
Copy link
Contributor

c0bra commented Mar 31, 2015

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

@c0bra c0bra modified the milestones: 3.1, 3.0 Mar 31, 2015
@c0bra
Copy link
Contributor

c0bra commented Apr 13, 2015

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
Copy link

ghost commented Apr 13, 2015

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
Copy link

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
Copy link

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
Copy link
Contributor

@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
Copy link

nitoloz commented Oct 21, 2015

Reproduced with 3.0.7
scroll

@amex132
Copy link

amex132 commented Dec 18, 2015

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
Copy link

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
Copy link

siva563 commented Aug 25, 2016

Still i am facing the issue @c0bra

@pradapkumar
Copy link

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
Copy link

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
Copy link

antonio91kim commented Dec 16, 2016

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests