Bug Tracker

Opened 12 years ago

Closed 12 years ago

Last modified 11 years ago

#7701 closed bug (invalid)

reinit css value for "top,bottom,left,right"

Reported by: anonymous Owned by: anonymous
Priority: undecided Milestone: 1.6
Component: unfiled Version: 1.4.4
Keywords: Cc:
Blocked by: Blocking:


if you applied a value for top and left on a element and later, if you want to positionned this element with bottom/right it doesnot work event if you give an empty,null,auto,undefined value to top and left value.

Change History (7)

comment:1 Changed 12 years ago by jitter

Owner: set to anonymous
Status: newpending

Thanks for taking the time to contribute to the jQuery project by writing a bug report.

Please submit a valid reduced test case, which reproduces the issue you are experiencing, on http://jsfiddle.net. So that we can investigate this issue further.

How to report bugs

comment:2 Changed 12 years ago by anonymous

Status: pendingnew

You can see this bug here:


comment:3 Changed 12 years ago by danheberden

Resolution: invalid
Status: newclosed

Thanks for taking the time to investigate this particular case. However, it isn't a bug, but rather - an issue of positioning in the browser.

Its similar to a css declaration, where if you have top and left defined along with right and bottom, it's hard to the browser to know quite what you mean. Particularly if the element has a fixed width.

So in the case of your example, if you think of it from the browser's perspective, how can it position it bottom/right when it's already top/left?

First, relinquish control over top/left. Something like

.css({top: 'auto', left: 'auto' })

will let you use the bottom/right stuff.

One note, though, these kind of animations can be a pain. Youll have to (just as you would with css) compensate for the bottom/right if you had it positioned top/left - e.g. the left of a 100px box in a 600px container is 100px, where the right is 400px. Just a heads up if you run into jumpy animations :D

Here's your demo, but with the top/left set to auto:


Last edited 12 years ago by danheberden (previous) (diff)

comment:4 Changed 12 years ago by anonymous

Thanks for your reply.

I already tried : ".css({top: 'auto', left: 'auto' })" it doesnot work.

More over, the difference between positionning div element at the bottom right corner with top/left proprieties rather than bottom/right proprieties is when the user enlarge is browser window:

With bottom/right proprieties it's always at the bottom right corner, with top/left proprieties it doesnot.

It really be nice if jQuery could do this staff by removing css "top,bottom,left,right" proprieties before updating them.

comment:5 Changed 12 years ago by danheberden

Did you see my example? Where positioning bottom/right works?

It would be cool if jquery reset these values, but then the cases of what if you only give a bottom param? Then for everybody ever setting top, right, bottom or left the element's dimensions have to be calculated, reset, stored, and that adds overhead for every possible call.

This is one of those cases where from a performance perspective, it makes much more sense (performance wise) to write your own function to handle that (assuming you're doing it more than once), that is, get the items dimensions, create new bottom/right values based of its current top/left with regards the dimensions of it's parent and then make your animation call.

Anyway, hope this explains it well :)

comment:6 Changed 12 years ago by [email protected]

In JQuery <= 1.4.2 you can clear a previously set style with ".css('key', 'value')" with ".css('key', null)".

In JQuery > 1.4.2 you need to use ".css('key', )".

Tested for left, top, position, z-index, width, height !

comment:7 in reply to:  6 Changed 12 years ago by [email protected]

Replying to [email protected]:

In JQuery > 1.4.2 you need to use ".css('key', )".

I mean empty chain :

.css("key", "");
Note: See TracTickets for help on using tickets.