Scrolling - column headers misaligned with data...

[cleon26]

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?

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

[kjkurtz]

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

[alexandery]

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]

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]

@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]

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]

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]

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]

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]

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

[yugansh20]

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]

@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]

any updates to this hi-pri bug?

[dczepierga]

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

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

[c0bra]

This is a dupe of #2521, leaving open.

[c0bra]

Closed via cf86090

[sachin-bs]

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]

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]

Workaround: non % values for width appear to work.

[nighojkarv]

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]

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]

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

[dlypka59]

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]

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]

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]

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

[kalihos]

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]

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]

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]

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]

@mesutd0nmez That works!

[kenaths]

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

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

[prashasti4]

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]

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

[kalihos]

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]

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]

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]

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> .