Skip to content

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

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.

Sign up for GitHub

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

Jump to bottom
Closed
cburschka opened this issue Feb 7, 2015 · 3 comments
Closed

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

cburschka opened this issue Feb 7, 2015 · 3 comments
Milestone
3.0.0

Comments

@cburschka
Copy link

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.
@cburschka cburschka mentioned this issue Feb 7, 2015
Closed
@dmethvin
Copy link
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?

@cburschka
Copy link
Author

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
Copy link

@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
@gibson042
Effects: Reference other tickets
bda5c2b 
Fixes jquerygh-2071
@gibson042 gibson042 mentioned this issue Apr 6, 2015
Closed
gibson042 added a commit that referenced this issue May 11, 2015
@gibson042
CSS: Ignore the CSS cascade in show()/hide()/etc.
9df8bd2 
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
cburschka added a commit to cburschka/cadence that referenced this issue May 11, 2015
@cburschka
added TODO: remove workaround for jquery/jquery#2071
4524879
@gibson042 gibson042 added this to the 3.0.0 milestone May 11, 2015
@gibson042 gibson042 mentioned this issue Jun 3, 2015
Closed
@markelog markelog mentioned this issue Nov 16, 2015
Closed
@markelog markelog mentioned this issue Dec 22, 2015
Closed
@gibson042 gibson042 mentioned this issue Jan 20, 2016
Closed
@wsalesky wsalesky mentioned this issue May 11, 2017
Closed
@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.
Assignees
No one assigned
Labels
None yet
Milestone
3.0.0
Development

Successfully merging a pull request may close this issue.

CSS: Ignore the CSS cascade in show()/hide()/etc. gibson042/jquery
5 participants
@dmethvin @timmywil @gibson042 @cburschka @three3211