CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
flashspys
flashspys

Reputation: 884

jQuery UI .resizable() & Bootstrap conflict

I have detected a conflict between jQuery and Bootstrap 3.

This jsFiddle will show:

http://jsfiddle.net/flashspys/S8eHJ/2/

important stuff:

$(".textdiv").draggable({containment: "parent"}).resizable({handles: "all"});
…
.textdiv {padding: 10px;}

If you resize the box you'll notice that the box is jumping a little bit. This behaviour only exist if the bootstrap.css is included. I discovered that this effect depends on the padding and the border of the inner div. If you increase the padding the box will jump harder.

Is this bug already known? I asked Google but I found nothing.

Upvotes: 3

Views: 3616

Answers (1)

DavidG
DavidG

Reputation: 118957

Bootstrap is applying box-sizing: border-box; to your div. Add box-sizing: content-box; to your textdiv css to fix it.

Here's how it looks: http://jsfiddle.net/S8eHJ/3/

Upvotes: 3

Related Questions