CODEWITHSUNDEEP
cssresizecss-positiondraggable
user9567282
user9567282

Reputation:

Problem resizing element that's a fixed position from the right

I have a div that starts out in a fixed position from the right of the window, but it's draggable (using javascript) and resizable (with css). The problem is that if the div is resized first (by grabbing the bottom right corner), it will not resize properly. It will maintain its fixed position from the right, and then it will grow or shrink from the left side. If, however, the div is dragged first, then resizing will work as expected. These are the current css properties of the div:

#resize {
  position: fixed;
  right: 30px;
  height: 90px;
  width: 90px;
  background-color: blue;
  resize: both;
  overflow: auto;
}

Demo:

https://jsfiddle.net/mravdo52/2/

I've tried various workarounds. Since it appears that the movement of the div makes resize work properly, I've tried just shifting the div by a pixel after loading the element, but that doesn't work, because I think there are timing issues between the load of the element, the execution of the javascript, and the load of the css. I subsequently tried using jQuery promise() and queue() to apply the css first, and then move the element, but those doesn't work either. I've also tried using the jQuery UI resizable(), but that appears to not resize at all. I'm out of ideas at this point and would appreciate any help.

Upvotes: 4

Views: 2787

Answers (1)

Suresh Karia
Suresh Karia

Reputation: 18238

CSS only solution: You just need to give to fixed positioned div initially.

Solution Explanation: The reason while it was working after dragging the element because, it was applying for a left position, so we can give left position before dragging element and it will work!

First tried giving left: auto/initial/inherit but not worked. So you can give something like this: left: calc(100% - 120px);

(120px represents summation of right position 30px and width of the div 90px)

#resize {
  position: fixed;
  right: 30px;
  left: calc(100% - 120px);
  height: 90px;
  width: 90px;
  background-color: blue;
  resize: both;
  overflow: auto;
  min-width: 90px;
  min-height: 90px;
  max-width: calc(100% - 60px);
  max-height: calc(100vh - 50px);
}


dragElement(document.getElementById("resize"));

function dragElement(elmnt) {
  var pos1 = 0,
    pos2 = 0,
    pos3 = 0,
    pos4 = 0;
  if (document.getElementById("drag")) {
    document.getElementById("drag").onmousedown = dragMouseDown;
  } else {
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
#resize {
  position: fixed;
  right: 30px;
  height: 90px;
  width: 90px;
  background-color: blue;
  resize: both;
  overflow: auto;
  min-width: 90px;
  min-height: 90px;
  max-width: calc(100% - 60px);
  max-height: calc(100vh - 50px);
}

#drag {
  background-color: red;
  height: 20px;
}
<div id="resize">
  <div id="drag">
  </div>
</div>

Updated fiddle: https://jsfiddle.net/mravdo52/6/

Upvotes: 2

Related Questions