#276 closed bug (fixed)

Opened October 13, 2006 09:06PM UTC

Closed November 15, 2006 11:11PM UTC

Last modified June 20, 2007 01:39AM UTC

animate() sets absolute dimensions when using "show" and "hide" targets

Reported by:	ieure	Owned by:	brandon
Priority:	undecided	Milestone:
Component:	effects	Version:
Keywords:		Cc:
Blocked by:		Blocking:

Description

When you use animate() to change the height or width of an element to "show" or "hide," the dimensions are specified in pixels when the animation is complete.

This is a problem when you have nested elements which slide down, since the containing box doesn't change size when the child is revealed.

I seem to recall that the height / width when animating were set to "auto" at the end. That's the correct behavior in this case. I don't know if that was removed for a reason or if it's a regression.

Attachments (0)

Change History (11)

Changed October 17, 2006 03:37PM UTC by brandon comment:1

The code for setting the height and width auto at the end is still in place. Could you provide an example where it doesn't work or a version/revision number where it stopped working?

Changed October 26, 2006 11:00PM UTC by ieure comment:2

Still happens with 1.0.2. Testcase:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Testing</title>
        <meta http-equiv="Content-type" "text/html; charset=utf-8">
    </head>
    <body>
        <div id="target">GIGAÂ·KNIGHTÂ®!</div>
        <div onclick="$('#target').animate({height: 'hide', opacity: 'hide'});">Hide</div>
        <div onclick="$('#target').animate({height: 'show', opacity: 'show'});">Show</div>
        <script type="text/javascript" src="jquery-1.0.2.js"></script>
    </body>
</html>

Click show, or hide, then show. Open up Firefox's DOM Inspector and look at #target. â€œstyleâ€ shows: overflow: hidden, display: block, height: 16px, opacity: 0.9999;

Perhaps the final loop iteration isn't running?

Changed October 31, 2006 11:44AM UTC by juha.suni@sp comment:3

Ran into the same issue when using the treeView plugin, using slideDown and slideUp. This worked flawless with an older version of jQuery, but with the new version I had to use the callback to manually set the height to auto after the animation had finished.

Changed November 10, 2006 02:50AM UTC by evoluenta@ho comment:4

I am able to reproduce similar behavior on nearly every form in Drupal by using jQuery's show() function (only with a parameter, such as "slow" or "fast").

I can fix the issue by removing the absolute pixel height added by show(), using Firefox DOM Inspector.

Bug and steps to reproduce (tested in Drupal only): http://drupal.org/node/93955

Changed November 11, 2006 11:46AM UTC by joern comment:5

priority:	major → critical
version:	1.0

Changed November 14, 2006 07:42PM UTC by brandon comment:6

owner:	john → brandon

Changed November 14, 2006 09:11PM UTC by brandon comment:7

resolution:	→ fixed
status:	new → closed

This is now fixed in SVN REV: 576.

As a result of this fix the private method jQuery.setAuto is deprecated.

After a show is complete the only thing that should be inline is the opacity in Firefox.

After a hide is complete the only thing that should be inline is the display: none.

All other properties are reset back to the controlling stylesheet or browser defaults.

Changed November 14, 2006 09:37PM UTC by evoluenta@ho comment:8

Thank you, brandon!!!

Changed November 15, 2006 10:54PM UTC by joern comment:9

priority:	critical → blocker
resolution:	fixed
status:	closed → reopened

This still isn't working right. I suspect that this issue is related, as it works with some older revisions. Demo: http://fuzz.bassistance.de/sandbox/sandbox.html

Changed November 15, 2006 11:11PM UTC by brandon comment:10

resolution:	→ fixed
status:	reopened → closed

This is actually the way it is supposed to work. The stylesheet should dictate how the styles should be and your styles say that element should be hidden. If you want to hide an element it should be done in document.ready. The previous way the fx lib was working was to be extremely obtrusive by leaving styles behind (including display: block). This breaks items that aren't supposed to be display block after the effect is over ... like table-row, inline, etc.

Changed November 16, 2006 09:44PM UTC by brandon comment:11

So as to not break existing code built on the existing 1.0.4 branch and to be more consistent with the existing regular show and hide methods the display property will remain inline but will be restored to original value after the animation is completed.

Side navigation