CODEWITHSUNDEEP
javascriptjqueryhtmldraggableresizable
user3546184
user3546184

Reputation: 67

Resizable is causing other elements below it to move

I am building a UI where I need to have two or more resizable and draggable DIVs. The problem that I am facing is that when you resize a div all the other divs that were originally below it are moving(changing their position). Please see https://jsfiddle.net/2f8g93nn/4/ where I wrote an example of what I mean. In that example if you moved the second div to the right and resized the first div the position of the second div will change.

HTML in jsfiddle.net:

<!doctype html>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="Element" id = "FirstDiv"  class="ui-widget-content">
  <p>First DIV</p>
</div>
<div class="Element" id = "SecondDiv" class="ui-widget-content">
  <p>Second DIV</p>
</div>

Javascript in jsfiddle.net:

   $(function() {
    $( ".Element" ).draggable();
     $( ".Element" ).resizable();   
  });

CSS in jsfiddle.net:

.Element { 
    width: 150px;
    height: 150px;
    padding: 0.5em;
    border:1px solid black; 
}

At the begining Second div is below first div

We moved the second div to the right

By increasing the size of the first div the position of the second div changed

Upvotes: 1

Views: 1982

Answers (4)

user3546184
user3546184

Reputation: 67

The answer that I came up with and it worked is by adding:

$('.ui-resizable').removeClass( "ui-resizable" )

Upvotes: 0

SeokKuan
SeokKuan

Reputation: 48

For my opinion and make thing simple, why don't you use tag...

Here is the Demo code: https://jsfiddle.net/SeokKuan/2f8g93nn/8/

 <textarea  style="height: 100px;" placeholder="First Content"></textarea><br>

<textarea  class="form-control" style="height: 100px;" placeholder="Second Content"></textarea>

nn/8/

Upvotes: 1

JavaScript.Place
JavaScript.Place

Reputation: 11

I would also recommend use CSS attribute 

position:absolute

But you have to rearrange the elements after loading, otherwise they will overlap. I made a quick jsfiddle example for this: https://jsfiddle.net/hanno_drefke/2f8g93nn/9/

Hope this might help you.

Upvotes: 0

suvroc
suvroc

Reputation: 3062

You should use position: absolute; for elements which should be placed independently into the page

https://jsfiddle.net/2f8g93nn/5/

Upvotes: 1

Related Questions