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

Horizontal scrollbar is always scrollable #2734

Closed
wendeldw opened this issue Feb 9, 2015 · 27 comments
Closed

Horizontal scrollbar is always scrollable #2734

wendeldw opened this issue Feb 9, 2015 · 27 comments

Comments

@wendeldw
Copy link

wendeldw commented Feb 9, 2015

After upgrading to 3.0.0-RC.18.

It seems you can always scroll a small area equivalent to the width of the vertical scrollbar. There is also a double line in the top right corner. Bug is clearly visible in all demos.

Is this a bug or by design. Can it be turned off?

image

@fresnault
Copy link

Hello,

You can disable the horizontal scroll bar with enableHorizontalScrollbar option.

$scope.grid = {
enableHorizontalScrollbar: 0
};

0 -> disable
1 -> enable
2 -> enable when needed

@wendeldw
Copy link
Author

wendeldw commented Feb 9, 2015

Thanks for the response, but it doesn't fix the bug.

The scrollbar should be visible but without the extra offset.

Something has been changed between RCv12 and RCv18

@mikila85
Copy link

still when the scrollbar is disabled with 0, it doesnt show but when pressing middle mouse and scrolling right you can still reach the dead zone:

untitled

@wendeldw
Copy link
Author

You can see the double lines in the area marked as green.

Regardless, I need to have the scroll-y enabled, as I did in rc12. There is
an offset which appeared after version rc12.

Paul, can you comment on this?

2015-02-10 8:37 GMT+01:00 mikila85 notifications@github.com:

still when the scrollbar is disabled with 0, it doesnt show but when
pressing middle mouse and scrolling right you can still reach the dead zone:

[image: untitled]
https://cloud.githubusercontent.com/assets/3965957/6123262/728369b0-b108-11e4-9ca0-6269e7635177.png


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

@PaulL1 PaulL1 added this to the 3.0 milestone Feb 10, 2015
@c0bra
Copy link
Contributor

c0bra commented Feb 11, 2015

This is a duplicate of #2521

@mszpiler
Copy link

I have the same problem :/ It exists also in RC19

@dczepierga
Copy link

I found a place where is bug:
https://github.com/angular-ui/ng-grid/blob/master/src/js/core/directives/ui-grid-header.js#L75

In this place the scrollbar width should be substracted from viewport width (viewport include scrollbar width), so it should be changed for something like this:
var availableWidth = containerCtrl.colContainer.getViewportWidth() - grid.scrollbarWidth;

grid.scrollbarWidth is greater than 0 only when enableVerticalScrollbar is set to ALWAYS, so it should work when we have scroll enabled and disabled...

I don't know this library, so it's hard for me to say that will break something else or not - i think no, but maybe someone else confirm this or propose how do this better?

c0bra added a commit that referenced this issue Feb 16, 2015
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
Copy link
Contributor

c0bra commented Feb 16, 2015

Closed via cf86090

@c0bra c0bra closed this as completed Feb 16, 2015
@mikila85
Copy link

fixed?? :)

@dczepierga
Copy link

yes fixed :)

@mikila85
Copy link

thank you 👍 great work!! going to try now.

@mikila85
Copy link

@c0bra
3.0.0-rc.19-e099c5b
can still drag it with mouse.
Without header:
image
with header:
image

@dczepierga
Copy link

@mikila85, but the version e099c5b is before this fix?

Look here:
https://github.com/angular-ui/ng-grid/commits/master

You should have at least cf86090

@mikila85
Copy link

thank you, sorry, still new at this i'll learn,
thank you again :)

@mszpiler
Copy link

I checked it. It is almost perfect, but when enableHorizontalScrollbar = 2 scrollbar shouldn't be visible but it is visible.

@c0bra c0bra reopened this Feb 17, 2015
@c0bra c0bra self-assigned this Feb 17, 2015
@c0bra
Copy link
Contributor

c0bra commented Feb 17, 2015

OK thanks for checking that. I'll try again tomorrow :)

@dczepierga
Copy link

@mszpiler, scroll is always visible because options enableHorizontalScrollbar = 2 is not supported? :)

Look here for available values for scrollbar:
https://github.com/angular-ui/ng-grid/blob/master/src/js/core/constants.js#L104

And here for relese notes:
https://github.com/angular-ui/ng-grid/blob/master/CHANGELOG.md

scrollbars.WHEN_NEEDED no longer an option

So it not works because this option is not supported ;)

@mikila85
Copy link

@mszpiler how did you get the version that includes the fix?
all i find here: https://github.com/angular-ui/ui-grid.info/tree/gh-pages/release
is * ui-grid - v3.0.0-rc.19-78a4b43 - 2015-02-16
and i dont see the fix is there, is there a way to get the most recent .js without waiting for an official RC to be released?

@mszpiler
Copy link

@mikila85 I build it with changes @c0bra on master
@dczepierga thank you for detailed explanation - so solution for me is ok :)

@mikila85
Copy link

how did you build it? (sorry for noob question)

@mszpiler
Copy link

Follow with instruction on https://github.com/angular-ui/ng-grid

@mikila85
Copy link

thank you! :)

@mikila85
Copy link

stuck like this for a very long time :(
image

@mikila85
Copy link

still hasnt finished lol. something is wrong

@c0bra
Copy link
Contributor

c0bra commented Feb 17, 2015

OK sounds like this issue is indeed fixed, then. Closing again.

@c0bra c0bra closed this as completed Feb 17, 2015
@dilumich
Copy link

I am using ng-grid and I cannot switch to ui-grid since my app is heavily depends on ng-grid. Is it possible to fix this issue for ng-grid.

@pradapkumar
Copy link

I have the same issue and there is no misalignment when I go to that page through navigation menus but when I click refresh and when the grid loads I am getting the misalignment.
On the first navigation load I see a small rectangle bar in the top of the vertical bar but when I refresh it goes off and get this issue. as in the above first screenshot in this thread the rectangle box above the scroll is going off when I refresh.
I there any fix for this? I tried all the option that is showed nothing is working
Please help to fix this

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

9 participants