Skip to content

Horizontal scroll on pinned column causes grid to scroll to rightmost border #4037

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

Open
joelmertanen opened this issue Jul 23, 2015 · 10 comments

Comments

@joelmertanen
Copy link
Contributor

Steps to reproduce:

  1. Open http://ui-grid.info/docs/#/tutorial/203_pinning
  2. Place mouse on the pinned Name column
  3. Scroll right either on trackpad or mouse (press shift for horizontal scrolling :)
    => the body of grid view jumps to the rightmost border.
    I expect the body of the grid view to not scroll horizontally.

In this gif, I first scroll to right only a bit. The body scrolls to the rightmost border. After that, I scroll down and right with the trackpad. The body scrolls again.
ui-grid

I was able to repeat the results with Chrome 43, Safari and Firefox on OS X 10.10.4 with external mouse and the trackpad. Also, I got similar results with the latest Ubuntu inside a VirtualBox.

@stanleegoodspeed
Copy link

+1

2 similar comments
@SeedSultan
Copy link

+1

@mmgmoh
Copy link

mmgmoh commented Jan 24, 2017

+1

@nw-fid
Copy link

nw-fid commented Jan 24, 2017

+1 (seeing this in Safari)

@mccxiv
Copy link

mccxiv commented Feb 1, 2017

Anyone found a workaround?

@jlbaez
Copy link

jlbaez commented Mar 15, 2017

+1

@SeedSultan
Copy link

No workarounds found, this issue is forcin us to switch away from ui grid

@yarl
Copy link

yarl commented Apr 7, 2017

I've found trick that worked for me. I changed margin-left to padding-left in the template below. You can just add this in your controller:

$templateCache.put('ui-grid/uiGridRenderContainer',
  "<div role=\"grid\" ui-grid-one-bind-id-grid=\"'grid-container'\" class=\"ui-grid-render-container\" ng-style=\"{ 'padding-left': colContainer.getMargin('left') + 'px', 'margin-right': colContainer.getMargin('right') + 'px' }\"><!-- All of these dom elements are replaced in place --><div ui-grid-header></div><div ui-grid-viewport></div><div ng-if=\"colContainer.needsHScrollbarPlaceholder()\" class=\"ui-grid-scrollbar-placeholder\" ng-style=\"{height:colContainer.grid.scrollbarHeight + 'px'}\"></div><ui-grid-footer ng-if=\"grid.options.showColumnFooter\"></ui-grid-footer></div>"
)

@ssudhanshudas
Copy link

+1

@harishpuvvada
Copy link

@yarl
I have a grid in which i have a left pinned column with links in each row. Your Solution fixes the scrolling problem. But, the padding-left makes the links in the pinned column un-clickable. Is this expected? Can you suggest any work around for my problem?

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

No branches or pull requests