Geek Answers Handbook

JQueryUI - resizing so my div switches from position: relative to absolute

I am trying to create a sliding, resizable bar inside a container. For some reason, the resizing method converts the div from position: Regarding position: Absolute. This visually moves the box and destroys the scroll action of the container container.

JSFiddle example

I tried connecting to the Stop and Resize event and moving back to Position: Relative, but this is pretty hacked and the results are not perfect. Seems this should work?

JQuery

$(document).ready(function () { $(".Timeline").draggable({ axis: "x", containment: "parent" }) .resizable({ containment: "parent", handles: 'e, w' }); });

HTML:

 <div style="width: 800px; overflow: auto;"> <div id="TimelineCanvas"> <div class="TimelineContainer"> <div class="Timeline"> </div> </div> </div> </div>

Style:

 #TimelineCanvas { width: 2000px; height: 150px; } .TimelineContainer { height: 75px; width: 100%; border: 1px solid black; } .Timeline { position: relative; height: 75px; width: 75px; background-color: Gray; cursor: move; }

My best attempt to fix:

 $(document).ready(function () { $(".Timeline").draggable({ axis: "x", containment: "parent" }) .resizable({ containment: "parent", handles: 'e, w', resize: function (event, ui) { $(this).css("height", ''); }, stop: function (event, ui) { $(this).css("position", ''); $(this).css("top", ''); $(this).css("height", ''); } }); });

Any help would be greatly appreciated; thanks!

+4
source share
3 answers

I could not find the initial defect report, why this happened, but it is quite obviously deliberate, perhaps specific to the browser ... Perhaps a dirty solution may be the best.

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.resizable.js#L242

  // bugfix for http://dev.jquery.com/ticket/1749 if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) { el.css({position: 'absolute',top: iniPos.top,left: iniPos.left}); }
+1
source 
 .resizable({ grid: 25, containment: "#"+ $(this).parent().attr("id"), // The parent stop: function(e, $this) { $(this).css({ position: "relative", left: $this.originalPosition.left, width:$this.originalSize.width }); } })

This should be the right way . But, of course, this is not so (always something would be broken, because draggable and re sizable have a position-width conflict), we must wait for JQuery-ui 2.0 ...

+2
source

Here is the original jQuery user interface and updated link. The ticket indicated in the code is incorrect.

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.resizable.js#L299

 // bugfix for http://dev.jquery.com/ticket/1749 if ( (/absolute/).test( el.css("position") ) ) { el.css({ position: "absolute", top: el.css("top"), left: el.css("left") }); } else if (el.is(".ui-draggable")) { el.css({ position: "absolute", top: iniPos.top, left: iniPos.left }); }
0
source

More articles:


All Articles