Side navigation
#2185 closed bug (fixed)
Opened January 17, 2008 04:54PM UTC
Closed October 09, 2010 08:22PM UTC
Last modified March 14, 2012 07:06AM UTC
animate does not work properly with non-block-level elements (table, tr, td, inline, etc.)
| Reported by: | Johnath | Owned by: | snover |
|---|---|---|---|
| Priority: | high | Milestone: | 1.4.3 |
| Component: | effects | Version: | 1.4.2 |
| Keywords: | Cc: | snover | |
| Blocked by: | Blocking: |
Description
Using slideToggle to hide/show a div styled with
display: inline-block;
Causes the display to go to "none" when hidden, and then "block" when restored. Ideally, the display should be set back to its original value.
It's simple to workaround by wrapping the styled div(s) in a normal block div, but obviously that's suboptimal. Obviously, testing this requires a browser that understands inline-block. I am seeing this behaviour in the Firefox 3 betas.
Attachments (0)
Change History (13)
Changed January 20, 2008 06:55AM UTC by comment:1
Changed January 28, 2008 09:01PM UTC by comment:2
I can confirm the same behavior that michaeltsmith85 is seeing. An inline css style of "display:none" set for a <tr> is being set with slideToggle to "display:block" which borks the table. It should be set to "table-row". I would opt for/maybe prefer setting the display parameter myself as it seems it could be complicated for jQuery to determine what sort of element needs what sort of display type.
Changed February 18, 2009 03:40AM UTC by comment:3
Changed March 11, 2009 03:17AM UTC by comment:4
Seems that there is two issues here.
- 1) height and width animations are always set to display: block
- 2) not all animations revert display back to the original
In jQuery.fx.update we need to check for inline-block or table-row.
// Set display property to block for height/width animations if ( ( this.prop == "height" || this.prop == "width" ) && this.elem.style ) this.elem.style.display = "block";
''line 4022-4024 in jQuery 1.3.2''
The second issue is solved in jQuery.fx.animate.
if ( ( p == "height" || p == "width" ) && this.style ) {
// Store display property
opt.display = jQuery.css(this, "display");
''line 3878-3880 in jQuery 1.3.2''
Changed March 13, 2009 01:25AM UTC by comment:5
found a whole bunch of issues with this problem.
- http://dev.jquery.com/ticket/4313
- http://dev.jquery.com/ticket/4173
- http://dev.jquery.com/ticket/4096
- http://dev.jquery.com/ticket/2503
Will look into this now.. :)
Changed December 01, 2009 10:59PM UTC by comment:7
| resolution: | → worksforme |
|---|---|
| status: | new → closed |
This was fixed a while back and there are tests for it.
Changed September 07, 2010 03:12PM UTC by comment:8
| resolution: | worksforme |
|---|---|
| status: | closed → reopened |
Is this genuinely fixed? My test case at http://estel.uwcs.co.uk/jquery/inlineblock.html still shows this issue to persist, and it's fixed by an amalgamation of fixes in this and #2503.
Changed October 04, 2010 09:34PM UTC by comment:9
| cc: | → snover |
|---|---|
| milestone: | 1.2.3 → 1.4.3 |
| need: | Review → Patch |
| owner: | → snover |
| priority: | minor → high |
| status: | reopened → new |
| version: | 1.2.2 → 1.4.2 |
Changed October 04, 2010 09:35PM UTC by comment:10
| status: | new → assigned |
|---|---|
| summary: | slideToggle doesn't preserve "display" style → animate does not work properly with non-block-level elements (table, tr, td, inline, etc.) |
Changed October 05, 2010 08:29PM UTC by comment:11
| need: | Patch → Commit |
|---|
Changed October 09, 2010 08:22PM UTC by comment:12
| resolution: | → fixed |
|---|---|
| status: | assigned → closed |
Changed October 31, 2010 09:41PM UTC by comment:13
#4908 is a duplicate of this ticket.
Just to clarify, this bug is also reproducible with slideUp and slideDown. show() & hide() don't reproduce the error. Further, this error also occurs for items with displays other than display: inline... table rows go from display: table-row to display: none (on hide) to display: block (on show again). Seems the patch would be either be for an option to add the display parameter or for jQuery to somehow remember the proper display type.