CODEWITHSUNDEEP
javascriptjquerycsshtmltwitter-bootstrap
lch
lch

Reputation: 2188

jQuery resizable div unwanted behaviour with Bootstrap

I'm working on a web application, and I need to have a panel on the right side of the page capable of being resized. I've accomplished that by using jQuery UI. But my app also needs to use Bootstrap, and I think that's the problem: when Itry to resize it, it moves a bit to the left. I don't want this effect can somebody help me please?

Fiddle

The box to be resized is the red one from right to left.

$('.move').resizable({handles: 'w'});

Upvotes: 2

Views: 209

Answers (1)

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10177

Resizable-function fails with this css property box-sizing:border-box as while resizing it forgets the padding and this property merges padding to width.

So while resizing it reduces the padding each time you start resizing and bootstrap css use this property.

Use this box-sizing:content-box

.move{
  position: absolute;
  width: 20%;
  height: 200px;
  bottom: 0;
  right: 0;
  border: 5px solid #f00;   
  margin-right: 0;
  box-sizing:content-box
}

This will overwrite default bootstrap css on this element and resizable function will work fine.

See fiddle : https://jsfiddle.net/DTcHh/23283/

Upvotes: 2

Related Questions