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

Undesired grid menu animation change #3921

Closed
brandonr1 opened this issue Jul 2, 2015 · 9 comments
Closed

Undesired grid menu animation change #3921

brandonr1 opened this issue Jul 2, 2015 · 9 comments

Comments

@brandonr1
Copy link

Basically the same as the column menu bug (#3436), but seems to be a grid menu problem as well.

When switching from 3.0.0-rc.20 to 3.0.0-rc.22, I noticed a change in the grid menu animation. It used to be nice and subtle, but it now comes down from the top of the page.

On my pages the problem doesn't happen when I use RC20 css with RC22 code. When I use RC22 css the behavior presents itself.

You can see it on the grid menu demo page (using Chrome ).
http://ui-grid.info/docs/#/tutorial/121_grid_menu

BTW, ui-grid is awesome!

@PaulL1
Copy link
Contributor

PaulL1 commented Jul 2, 2015

Ah, that's a good finding. I had assumed it was a css change, but I thought I did a bisect and didn't find it. Perhaps I did the bisect wrong. If it's css it'd be much easier to fix.

Any chance you could work out which line in the css does it? I'm guessing it's a position absolute or something like that somewhere on the menu css.

@brandonr1
Copy link
Author

I'll double check to verify css is the most likely cause and dig in next week when I get back to work. I hope it is on the easier side :)

@anilnatha
Copy link

I just began adding animation to my application and prior to adding the ngAnimate module to my app, I had no issues with the menu; however, after adding ngAnimate, I'm experiencing the same issue that brandonr1 is reporting running 3.0.0-rc.22 as well.

@anilnatha
Copy link

Just a side note: I really wish there was a way to disable animation for the grid, but because of this issue, I have to remove the animation module from my application entirely and forgo adding animation to the rest of my app because of the menu's jumpy behavior, unless there is a workaround that I'm unaware of.

Allowing developers to choose if they want the grid to use animation or not would be a step in the right direction, rather than forcing grid features to always be animated if the animation module is added to an app.

@mikyladewitt
Copy link

+1 I have the same problem. It would be great to be able to disable this for developers that use ng-animate, but don't want to have the column animation.

@antoinebrault
Copy link

gridOptions.onRegisterApi = function (gridApi) {
$animate.enabled(gridApi.grid.element, false);
}

@anilnatha
Copy link

Thanks @antoinebrault! I'll give that a try!

@Maus3rVonDutch
Copy link

I think it's just a css issue. Not sure if this is the appropiate fix, but in the mean time you could apply this css to fix it as an alternative to disabling the animation altogether as mentioned above:

.ui-grid-contents-wrapper {
    overflow: hidden;
}

@markoffk
Copy link

Hello! What is the state of this bug? is it gonna to be fixed someday? Thanks!

caseyjhol added a commit to snapappointments/ui-grid that referenced this issue Mar 3, 2018
Since v3.0.0-rc.21, the column/grid menu animation slides down from
above the grid, but it is visible the entire time. This causes the
animation to appear clunky. This has been resolved by setting `overflow:
hidden` on the menu.

Fixes angular-ui#3436, angular-ui#3921, angular-ui#3978.

Showing/hiding the menu can seem slow. The menu animation has been sped
up as well, and when it is hidden, the animation is now twice as fast.

Previously, to calculate the menu position, the width of the menu needed
to be calculated, which meant calling `repositionMenu` twice - once when
first opening the menu, and again after the menu is visible to allow the
width of the menu to be determined. This also meant there was always a
"shift" when the menu was first opened (as a default width of 170px was
used until the actual width of the menu could be determined. This
implements the CSS trick `right: 100%` so the width is not needed when
determining the menu's position, meaning the menu can be opened much
more smoothly and without needing to call `repositionMenu` twice.

Fixes angular-ui#6587.
caseyjhol added a commit to snapappointments/ui-grid that referenced this issue Mar 3, 2018
Since v3.0.0-rc.21, the column/grid menu animation slides down from
above the grid, but it is visible the entire time. This causes the
animation to appear clunky. This has been resolved by setting `overflow:
hidden` on the menu.

Fixes angular-ui#3436, angular-ui#3921, angular-ui#3978.

Showing/hiding the menu can seem slow. The menu animation has been sped
up as well, and when it is hidden, the animation is now twice as fast.

Previously, to calculate the menu position, the width of the menu needed
to be calculated, which meant calling `repositionMenu` twice - once when
first opening the menu, and again after the menu is visible to allow the
width of the menu to be determined. This also meant there was always a
"shift" when the menu was first opened (as a default width of 170px was
used until the actual width of the menu could be determined. This
implements the CSS trick `right: 100%` so the width is not needed when
determining the menu's position, meaning the menu can be opened much
more smoothly and without needing to call `repositionMenu` twice.

Fixes angular-ui#6587.

remove lastMenuWidth from tests
caseyjhol added a commit to snapappointments/ui-grid that referenced this issue Mar 3, 2018
Since v3.0.0-rc.21, the column/grid menu animation slides down from
above the grid, but it is visible the entire time. This causes the
animation to appear clunky. This has been resolved by setting `overflow:
hidden` on the menu.

Fixes angular-ui#3436, angular-ui#3921, angular-ui#3978.

Showing/hiding the menu can seem slow. The menu animation has been sped
up as well, and when it is hidden, the animation is now twice as fast.

Previously, to calculate the menu position, the width of the menu needed
to be calculated, which meant calling `repositionMenu` twice - once when
first opening the menu, and again after the menu is visible to allow the
width of the menu to be determined. This also meant there was always a
"shift" when the menu was first opened (as a default width of 170px was
used until the actual width of the menu could be determined. This
implements the CSS trick `right: 100%` so the width is not needed when
determining the menu's position, meaning the menu can be opened much
more smoothly and without needing to call `repositionMenu` twice.

Fixes angular-ui#6587.

remove lastMenuWidth from tests

no message
mportuga pushed a commit that referenced this issue Mar 5, 2018
Since v3.0.0-rc.21, the column/grid menu animation slides down from
above the grid, but it is visible the entire time. This causes the
animation to appear clunky. This has been resolved by setting `overflow:
hidden` on the menu.

Fixes #3436, #3921, #3978.

Showing/hiding the menu can seem slow. The menu animation has been sped
up as well, and when it is hidden, the animation is now twice as fast.

Previously, to calculate the menu position, the width of the menu needed
to be calculated, which meant calling `repositionMenu` twice - once when
first opening the menu, and again after the menu is visible to allow the
width of the menu to be determined. This also meant there was always a
"shift" when the menu was first opened (as a default width of 170px was
used until the actual width of the menu could be determined. This
implements the CSS trick `right: 100%` so the width is not needed when
determining the menu's position, meaning the menu can be opened much
more smoothly and without needing to call `repositionMenu` twice.

Fixes #6587.

remove lastMenuWidth from tests

no message
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