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

Animated toggle() turns display:inline into display:inline-block #2071

Closed
cburschka opened this Issue Feb 7, 2015 · 3 comments

Comments

Projects
None yet
5 participants
@cburschka

cburschka commented Feb 7, 2015

There's an example here: http://jsfiddle.net/cburschka/ve5fbujq/

The non-animated toggle() appears to work normally. An animation like toggle('slow') will put a display:inline-block property on the <span> element, which in the above example causes the red text to drop to a new line instead of wrapping normally.

This happens whether or not the span was explicitly set to display:inline earlier, or was just inheriting the default value.

This bug seems similar to #1774 (apparently closed prior to the release of 2.1.3), but isn't quite the same.

@dmethvin

This comment has been minimized.

Show comment
Hide comment
@dmethvin

dmethvin Feb 18, 2015

Member

This looks correct to me. The display: inline-block is necessary to actually change the dimensions of the element during animation. The text wraps strangely because the .hide() animation changes the width, height, and opacity. When the width reduces to less than the length of the text, the text wraps.

What did you expect to happen?

Member

dmethvin commented Feb 18, 2015

This looks correct to me. The display: inline-block is necessary to actually change the dimensions of the element during animation. The text wraps strangely because the .hide() animation changes the width, height, and opacity. When the width reduces to less than the length of the text, the text wraps.

What did you expect to happen?

@dmethvin dmethvin added the Needs info label Feb 18, 2015

@cburschka

This comment has been minimized.

Show comment
Hide comment
@cburschka

cburschka Mar 25, 2015

Basically, the problem is that calling toggle() twice doesn't leave it in the state it was before - it's permanently turned into an inline-block element, even after the animation is over.

It can be worked around by explicitly resetting the element back to inline after the animation is done, though.

cburschka commented Mar 25, 2015

Basically, the problem is that calling toggle() twice doesn't leave it in the state it was before - it's permanently turned into an inline-block element, even after the animation is over.

It can be worked around by explicitly resetting the element back to inline after the animation is done, though.

@three3211

This comment has been minimized.

Show comment
Hide comment
@three3211

three3211 Apr 6, 2015

@cburschka I am having the same issue. Whenever I call toggle, the hiding aspect works fine. However, when toggling back to show the hidden content, the inline style of display:inline-block is left and causes my content to appear not as it was originally.

As @cburschka, it can be worked around by explicitly resetting the element back to inline after the animation is done.

three3211 commented Apr 6, 2015

@cburschka I am having the same issue. Whenever I call toggle, the hiding aspect works fine. However, when toggling back to show the hidden content, the inline style of display:inline-block is left and causes my content to appear not as it was originally.

As @cburschka, it can be worked around by explicitly resetting the element back to inline after the animation is done.

gibson042 added a commit to gibson042/jquery that referenced this issue Apr 6, 2015

@dmethvin dmethvin removed the Needs info label Apr 30, 2015

gibson042 added a commit that referenced this issue May 11, 2015

CSS: Ignore the CSS cascade in show()/hide()/etc.
Fixes gh-1767
Fixes gh-2071
Closes gh-2180

(cherry picked from commit 86419b1)

Conflicts:
	src/css.js
	src/css/defaultDisplay.js
	src/effects.js
	test/data/testsuite.css
	test/unit/css.js
	test/unit/effects.js

@gibson042 gibson042 closed this in 86419b1 May 11, 2015

cburschka added a commit to cburschka/cadence that referenced this issue May 11, 2015

@gibson042 gibson042 added this to the 3.0.0 milestone May 11, 2015

@lock lock bot locked as resolved and limited conversation to collaborators Jun 19, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.