CODEWITHSUNDEEP
javascriptjqueryhtmlcss
gsamaras
gsamaras

Reputation: 73366

Image gets moved on drag

In Chrome it works fine, but not in Firefox, as you can see in the JSFiddle. The problem is that the picture next to player gets moved when the player is dragged.

Here is the CSS:

.player {
    color: #000;
    background-color: rgba(40, 180, 40, 0.8);
    padding: 5px;
    border: 2px solid #000;
    border-radius: 50px;
    display: inline-block;
}

How to make it work in Firefox too?

Bonus question: In order to keep the picture a little separate from the player (in both browsers), I use a whitespace after the player. It would be nice if I could that with CSS only.

Upvotes: 0

Views: 69

Answers (2)

Kiz
Kiz

Reputation: 439

I get this issue on FF 40.0.3 when running your fiddle as well. Is probably related to an older bug within jqueryUI in that it sets an explicit width/height on the element when performing drag. This bug seems to have re-appeared in the last few versions. Try using jQueryUI version 1.11.1.

Upvotes: 1

Asons
Asons

Reputation: 87191

To separate text/image I removed the extra span around img tag (can't see what good that extra span does) and added margin to the alignPic class.

Check this http://jsfiddle.net/pk58tu36/2/

.alignPic {
    vertical-align: middle;
    margin-left: 8px;
}

Upvotes: 2

Related Questions