Scrolling - column headers misaligned with data... #2592

cleon26 · 2015-01-19T21:04:07Z

Hey guys. I found a weird issue. I've been scratching my head with this one for a while trying to narrow it down. As best I can tell it's somehow related to the container size?

Run this plnkr.
Reduce the width of the right most column to about the size of the label "Company".
Scroll the table to the right and everything looks fine.
http://plnkr.co/edit/2gUnkzVdF1xvU9muNZ4K?p=preview
Now run the plunker in embedded view.
Reduce the width of the right most column to about the size of the label "Company".
Scroll the table to the right and notice that the columns are misalgined with the headers.
http://embed.plnkr.co/2gUnkzVdF1xvU9muNZ4K/preview

kjkurtz · 2015-01-19T21:58:22Z

I have this same issue except it only occurs when horizontal scrolling. It initially shows up correctly.

alexandery · 2015-01-19T23:51:46Z

I could swear I've added an issue for this last week but I cannot find it anywhere?! Yeah, seems like there is some issue with the scrolling and the header getting out of sync with the columns.

PaulL1 · 2015-01-20T06:56:22Z

There was, I think, but I haven't recreated any issues with header misalignment for some time (since @swalters removed the throttling I think). On the plunkers provided above I don't get a misalignment, so perhaps it is somewhat OS or browser dependent?

alexandery · 2015-01-20T07:38:34Z

@PaulL1 I get it on both IE9 and FF 35 (whatever is the latest as of today). And I do get it on Tutorial pages.

P.S. Funny enough - I submitted an issue for this mid last week but for the life of me cannot find it in the issues here. I had screenshots to showcase the issue. Weird.

cleon26 · 2015-01-20T13:22:58Z

I can replicate it on IE11 and FF35.
And I swore that I could do it in Chrome39 yesterday as well, but am starting to doubt myself this morning.

PaulL1 · 2015-01-31T04:54:28Z

I'm trying to replicate today, and I cannot replicate on firefox on Linux, nor on Chrome.

When you say you scroll, is there some trick to the scrolling? I've tried trackpad on Chrome/OSX, and I've tried both dragging and using the scrollbar buttons on Firefox, neither are giving me a header misalignment.

cleon26 · 2015-01-31T23:49:59Z

Nothing fancy... I can try again at work on Monday...

Sent from my iPad

On Jan 30, 2015, at 11:54 PM, Paul notifications@github.com wrote:

I'm trying to replicate today, and I cannot replicate on firefox on Linux, nor on Chrome.

When you say you scroll, is there some trick to the scrolling? I've tried trackpad on Chrome/OSX, and I've tried both dragging and using the scrollbar buttons on Firefox, neither are giving me a header misalignment.

—
Reply to this email directly or view it on GitHub.

cleon26 · 2015-02-02T16:02:39Z

Just tried again this morning and can still replicate it in FF. Doesn't seem to matter whether I click the scroll button or drag the scroll bar.

sachin-bs · 2015-02-04T21:28:02Z

I am running into similar issues, tested in both IE11, FF30

yugansh20 · 2015-02-05T04:37:54Z

Hi I am facing same issue.
When we scroll to the extreme right some of the columns are not reachable.
It will show 2nd last or 3rd last column as last column and I can see a very small part of the last column

PaulL1 · 2015-02-05T05:01:56Z

@yugansh20 : your issue sounds different, this issue is about the header being misaligned with the column, not columns being unreachable. If that is your issue, suggest raising that as a new issue along with a plunker that demonstrates it.

sachin-bs · 2015-02-12T14:43:23Z

any updates to this hi-pri bug?

dczepierga · 2015-02-16T08:49:57Z

I write quick fix for scroll here:
#2734 (comment)

Maybe this fix also help with this bug? (for me it works)

c0bra · 2015-02-16T16:51:07Z

This is a dupe of #2521, leaving open.

@dczepierga

With the newer native scrollbar changes we need to subtract the scrollbar width from the available width used to render the columns, otherwise the viewport contents will overflow the visible area and cause the viewport to scroll horizontally when we don't want it to. Thanks to @dczepierga for tracking down the cause and solution. Fixes #2521, #2734, #2592

c0bra · 2015-02-16T17:37:24Z

Closed via cf86090

sachin-bs · 2015-02-17T19:25:50Z

So a fix was made to align the column lines with the header lines but in the process a gap was introduced at the beginning of the grid...

nitoloz · 2015-10-21T12:48:55Z

This seems to reproduce even with the quite new release (3.0.7)
See image attached. Looks like the place the scroll takes is not counted when scrolling.

dlypka59 · 2015-11-03T17:37:43Z

Workaround: non % values for width appear to work.

nighojkarv · 2015-12-08T22:14:03Z

I'm having the same issue but the other way. The left end of my grid is misaligned but as I scroll to the right, the grid gets aligned automatically.

dlypka59 · 2015-12-08T22:20:47Z

I solved it by not use % values for the column widths. Just use integer
units. Then the alignment is OK all the way on the scroll.

On Tue, Dec 8, 2015 at 4:14 PM, nighojkarv notifications@github.com wrote:

I'm having the same issue but the other way. The left end of my grid is
misaligned but as I scroll to the right, the grid gets aligned
automatically.
[image: grid-trouble]
https://cloud.githubusercontent.com/assets/11322165/11670300/1182a13a-9dcf-11e5-9a4e-f3bde44f3e5b.png

—
Reply to this email directly or view it on GitHub
#2592 (comment)
.

nighojkarv · 2015-12-08T22:26:31Z

I am using a fixed width of 150 on the columns, but still i'm getting the same issue.

dlypka59 · 2015-12-08T22:28:32Z

remove any template in each column definition. The template if it is not
conforming to the various latest template standard can cause issues)

On Tue, Dec 8, 2015 at 4:26 PM, nighojkarv notifications@github.com wrote:

I am using a fixed width of 150 on the columns, but still i'm getting the
same issue.

—
Reply to this email directly or view it on GitHub
#2592 (comment)
.

kalihos · 2016-04-12T06:17:26Z

I have the same problem...

I'm not using percentages nor templates, except one for color choosing. I saw in other thread the same problem, caused by using enableHorizontalScrollbar:2 (not my case: I'm using value 1). I'm using Angular 1.4.9 and UI-Grid 3.0.7, with the latest Chrome version.

angular-git-user · 2016-05-23T06:02:50Z

Yes @dlypka59 it seems that % in not working anymore.... If we create column defs and do not add width property, then it is properly aligned within firefox but not in chrome. So I created my own col defs and plugged in width in pixels (ex. [{field:name, width:'100'}]) and it works fine.. (also tried with % but does not seem to allign, (ex. [{field:name, width:'15%'}]))

SuprasannaBhaumik · 2016-08-26T04:03:15Z

@nighojkarv , for your issue add this css rule in your custom class
.ui-grid-row{
clear: both;
}

kalihos · 2016-09-01T11:45:30Z

Hi!

Thanks for your reply. I tried your solution, but I've not been capable to
make it work. But it's possible that it were my fault, because my css
knowledge is very limited. I tried to include your code inside the "myGrid"
css tag, as I make with others. But I can't get it fine. I noticed that
other similar grid works correctly, so I think there can be another
problem. Thank you again!

2016-08-26 6:03 GMT+02:00 SuprasannaBhaumik notifications@github.com:

@nighojkarv https://github.com/nighojkarv , for your issue add this css
rule in your custom class
.ui-grid-row{
clear: both;
}

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#2592 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/APdPAFpBvLnm9W2-jLYF2rsQRTWvbE4Tks5qjmWSgaJpZM4DUWLH
.

robs15 · 2016-09-19T12:11:42Z

I still have this issue on ver. 3.2.7.

Using the following options :
exporterMenuPdf: false,
enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false,
enableSorting: true,
enableFiltering: true,
//enableGridMenu: true,
enableColumnResizing: true,
enableHorizontalScrollbar: true,
enableVerticalScrollbar: true,
paginationPageSizes: [10, 20, 30],
paginationPageSize: 10,

The columns are set to pixel widths. No width or height style set to the overall grid.

mesutd0nmez · 2016-11-18T13:57:56Z

Hey guys, i had same problem. I searched a code like below, and it worked for me. Try it.

.ui-grid-header-cell {float: left;}

antonio91kim · 2016-12-16T08:28:25Z

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;
}

ginz · 2017-02-23T17:22:33Z

@mesutd0nmez That works!

kenaths · 2017-03-10T08:29:07Z

Set enableVerticalScrollbar to true, It'll fix the issue.

        $scope.gridOptions = {
            enableVerticalScrollbar: 1,
            ..............
        }

prashasti4 · 2017-11-21T06:55:43Z

I Fixed it by rounding of the header column min and max width in following function:
r.prototype.getColClassDefinition = function() {
//round of the values
return " .grid" + this.grid.id + " " + this.getColClass(!0) + " { min-width: " + Math.round(this.drawnWidth) + "px; max-width: " + Math.round(this.drawnWidth) + "px; }"
}

FizzBuzz791 · 2018-06-25T02:47:30Z

This is still an issue in version 4.6.0
I had to fix it by using @kenaths approach... Should not be necessary.

kalihos · 2018-07-06T07:52:23Z

That approach doesn't work for me (AngularJS 1.6.1). Still misaligned... El lun., 25 jun. 2018 a las 4:47, Trent Jones (<notifications@github.com>) escribió:

…

This is still an issue in version 4.6.0 I had to fix it by using @kenaths <https://github.com/kenaths> approach... Should not be necessary. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2592 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/APdPAGUFqLvdkTAoH-eKC36-_01HPlBMks5uAE9TgaJpZM4DUWLH> .

kalihos · 2018-07-27T16:11:57Z

Closed? Why? It doesn't work well... El 27/7/2018 17:34, "Marcelo Sauerbrunn Portugal" <notifications@github.com> escribió:

…

Closed #2592 <#2592> via f9ac3e5 <f9ac3e5> . — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2592 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/APdPAHRK-LaE3w82o7o3Jy3NLABVbVbDks5uKzMKgaJpZM4DUWLH> .

mportuga · 2018-07-27T16:58:34Z

This was closed by a pull request that just got merged in. It will be in the next release of ui-grid. I will try to release it this weekend so that you can have it ASAP and if it does not work for some reason, then we can reopen it.

kalihos · 2018-07-27T17:23:12Z

Thank you very much! El 27/7/2018 18:58, "Marcelo Sauerbrunn Portugal" <notifications@github.com> escribió:

…

This was closed by a pull request that just got merged in. It will be in the next release of ui-grid — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2592 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/APdPAAU4zMukSUlIGX85dEphG7B4yVEQks5uK0bIgaJpZM4DUWLH> .

* Change grid header css to flexbox Change grid header css to be flexbox based Header display properties was previously table based while body is block based. This causes alignment issues in some cases. * Better spacing * Another space Fix angular-ui#6799, Fix angular-ui#2592

PaulL1 added the type: bug label Jan 20, 2015

PaulL1 added this to the 3.0 milestone Jan 20, 2015

PaulL1 added the Hi-Pri Bug label Jan 25, 2015

c0bra mentioned this issue Jan 26, 2015

[3.0][Scroll] table column are not under header column, when I use horizontal scrollbar #2636

Closed

PaulL1 removed the type: bug label Jan 31, 2015

PaulL1 self-assigned this Jan 31, 2015

PaulL1 added the waiting-response label Jan 31, 2015

PaulL1 removed their assignment Feb 5, 2015

c0bra mentioned this issue Feb 11, 2015

Horizontal scrollbar is always scrollable #2734

Closed

c0bra removed the waiting-response label Feb 16, 2015

c0bra self-assigned this Feb 16, 2015

c0bra added the resolution: duplicate label Feb 16, 2015

c0bra closed this as completed Feb 16, 2015

mportuga reopened this Jun 25, 2018

mportuga added help wanted and removed resolution: duplicate labels Jun 25, 2018

FizzBuzz791 mentioned this issue Jun 27, 2018

100% width with grids and tabs #6777

Open

m4m4m4 mentioned this issue Jul 27, 2018

Change grid header css to flexbox #6813

Merged

mportuga closed this as completed in f9ac3e5 Jul 27, 2018

Scrolling - column headers misaligned with data... #2592

Scrolling - column headers misaligned with data... #2592

Comments

cleon26 commented Jan 19, 2015

kjkurtz commented Jan 19, 2015

alexandery commented Jan 19, 2015

PaulL1 commented Jan 20, 2015

alexandery commented Jan 20, 2015

cleon26 commented Jan 20, 2015

PaulL1 commented Jan 31, 2015

cleon26 commented Jan 31, 2015

cleon26 commented Feb 2, 2015

sachin-bs commented Feb 4, 2015

yugansh20 commented Feb 5, 2015

PaulL1 commented Feb 5, 2015

sachin-bs commented Feb 12, 2015

dczepierga commented Feb 16, 2015

c0bra commented Feb 16, 2015

c0bra commented Feb 16, 2015

sachin-bs commented Feb 17, 2015

nitoloz commented Oct 21, 2015

dlypka59 commented Nov 3, 2015

nighojkarv commented Dec 8, 2015

dlypka59 commented Dec 8, 2015

nighojkarv commented Dec 8, 2015

dlypka59 commented Dec 8, 2015

kalihos commented Apr 12, 2016

angular-git-user commented May 23, 2016

SuprasannaBhaumik commented Aug 26, 2016

kalihos commented Sep 1, 2016

robs15 commented Sep 19, 2016

mesutd0nmez commented Nov 18, 2016

antonio91kim commented Dec 16, 2016 • edited Loading

ginz commented Feb 23, 2017

kenaths commented Mar 10, 2017

prashasti4 commented Nov 21, 2017

FizzBuzz791 commented Jun 25, 2018

kalihos commented Jul 6, 2018 via email

kalihos commented Jul 27, 2018 via email

mportuga commented Jul 27, 2018 • edited Loading

kalihos commented Jul 27, 2018 via email

antonio91kim commented Dec 16, 2016 •

edited

Loading

mportuga commented Jul 27, 2018 •

edited

Loading