Opened 11 years ago

Last modified 7 years ago

#4228 open bug

margin: #px auto; not respected with effects

Reported by: ChronoworX Owned by:
Priority: major Milestone: none
Component: ui.effects.core Version: 1.6rc6
Keywords: margin, auto, effect Cc:
Blocked by: Blocking:

Description

== Description ==
If an object has a margin: #px auto; CSS decleration used for centering, adding an effect like 'shake' or 'bounce' causes the object to be aligned to the left (disrespecting the 'auto' part in the margin decleration) in the following browers:

Opera 9(.63), FF 2(.0.0.20), FF 3(.0.6) and IE 6

Also, the content below this object snaps to a lower position during the animation in the browsers mentioned above AND:

Safari 4(public beta 5528.16), WebKit (nightly build), Chrome (1.0.154.48)

== Expected behaviour ==
The object should stay centered during the animation (of course, taking the offsets of the animation into account).

Attachments (1)

jquery_margin_auto_effect.html (1.2 KB) - added by ChronoworX 11 years ago.
Test case

Download all attachments as: .zip

Change History (12)

Changed 11 years ago by ChronoworX

Test case

comment:1 Changed 11 years ago by Jörn Zaefferer

Milestone: TBD1.next

comment:2 Changed 11 years ago by Jörn Zaefferer

Milestone: 1.next1.7

comment:3 Changed 11 years ago by rdworth

Milestone: 1.71.8

comment:4 Changed 9 years ago by Chevex

I am encountering this issue. I would just like to add that it also left aligns in IE 7 and IE 8. It works properly in Chrome and IE9. I know this issue is present in JQuery UI 1.8.9.

Last edited 9 years ago by Chevex (previous) (diff)

comment:5 Changed 9 years ago by Corey Frang

#6120 is a duplicate of this ticket.

comment:6 Changed 9 years ago by Corey Frang

http://bugs.jqueryui.com/ticket/6120 has some code that may help find the solution...

comment:7 Changed 9 years ago by Corey Frang

Status: newopen

http://jsfiddle.net/gnarf/vmL38/ for a jsfiddle test case - note this seems to happen with almost every effect...

comment:8 Changed 8 years ago by tomykaira

https://github.com/tomykaira/jquery-ui/tree/bug_4228 Here is a patch. The width of wrapper is 100%, when the block is not floating. This makes the original margin setting work correctly.

comment:9 Changed 8 years ago by Scott González

not landed, but useful for reference: https://github.com/jquery/jquery-ui/pull/285

comment:10 Changed 7 years ago by Scott González

Milestone: 1.9.01.10.0

comment:11 Changed 7 years ago by tj.vantoll

Milestone: 1.10.0none
Note: See TracTickets for help on using tickets.