css resizeable div by dragging border not corner

Question

While codding my own JavaScript-based resizable panel I figured that there's a nice new CSS3 style property that does that trick in a much cleaner way. But the only problem I'm facing with this CSS based approach is that it can only be resized from the corner while it has to be resizable from the borders too not only the corner! The user might not even notice that it can be resized from the corner.

Please don't disappoint me and tell me that there's no way to achieve this with the CSS resize property! I didn't find enough information on w3.org but I'm still putting some hope in this.

.container{
  background-color: black;
  width: 400px;
  height: 400px;
}

.resizable{
  background-color: lightgray;
  width: 300px;
  height: 400px;
  resize: both;
  overflow: auto;
  min-width: 200px;
  min-height: 200px;
  max-width: 350px;
  max-height: 400px;
}


  
    Drag the bottom-right corner to resize me
    However, Unfortunately, you can't resize me by dragging any of the right or bottom borders

user_6696746 · Answer

Seems like it's totally up to browser creators how the resize mechanism will be implemented and the only way to achieve desired and normalized behaviour would be with JS (e.g. https://jqueryui.com/resizable/)

user_10002142 · Answer

If you need something like this:

DEMO

HTML:

 function makeResizableDiv(div) {
      const element = document.querySelector(div);
      const resizers = document.querySelectorAll(div + ' .resizer')
      const minimum_size = 20;
      let original_width = 0;
      let original_height = 0;
      let original_x = 0;
      let original_y = 0;
      let original_mouse_x = 0;
      let original_mouse_y = 0;
      for (let i = 0;i < resizers.length; i++) {
        const currentResizer = resizers[i];
        currentResizer.addEventListener('mousedown', function(e) {
          e.preventDefault()
          original_width = parseFloat(getComputedStyle(element, null).getPropertyValue('width').replace('px', ''));
          original_height = parseFloat(getComputedStyle(element, null).getPropertyValue('height').replace('px', ''));
          original_x = element.getBoundingClientRect().left;
          original_y = element.getBoundingClientRect().top;
          original_mouse_x = e.pageX;
          original_mouse_y = e.pageY;
          window.addEventListener('mousemove', resize)
          window.addEventListener('mouseup', stopResize)
        })
        
        function resize(e) {
          if (currentResizer.classList.contains('bottom-right')) {
            const width = original_width + (e.pageX - original_mouse_x);
            const height = original_height + (e.pageY - original_mouse_y)
            if (width > minimum_size) {
              element.style.width = width + 'px'
            }
            if (height > minimum_size) {
              element.style.height = height + 'px'
            }
          }
          else if (currentResizer.classList.contains('bottom-left')) {
            const height = original_height + (e.pageY - original_mouse_y)
            const width = original_width - (e.pageX - original_mouse_x)
            if (height > minimum_size) {
              element.style.height = height + 'px'
            }
            if (width > minimum_size) {
              element.style.width = width + 'px'
              element.style.left = original_x + (e.pageX - original_mouse_x) + 'px'
            }
          }
          else if (currentResizer.classList.contains('top-right')) {
            const width = original_width + (e.pageX - original_mouse_x)
            const height = original_height - (e.pageY - original_mouse_y)
            if (width > minimum_size) {
              element.style.width = width + 'px'
            }
            if (height > minimum_size) {
              element.style.height = height + 'px'
              element.style.top = original_y + (e.pageY - original_mouse_y) + 'px'
            }
          }
          else {
            const width = original_width - (e.pageX - original_mouse_x)
            const height = original_height - (e.pageY - original_mouse_y)
            if (width > minimum_size) {
              element.style.width = width + 'px'
              element.style.left = original_x + (e.pageX - original_mouse_x) + 'px'
            }
            if (height > minimum_size) {
              element.style.height = height + 'px'
              element.style.top = original_y + (e.pageY - original_mouse_y) + 'px'
            }
          }
        }
        
        function stopResize() {
          window.removeEventListener('mousemove', resize)
        }
      }
    }
    
    makeResizableDiv('.resizable')

  body,
    html {
      background: black;
    }
    .resizable {
      background: white;
      width: 100px;
      height: 100px;
      position: absolute;
      top: 100px;
      left: 100px;
    }
    
    .resizable .resizers{
      width: 100%;
      height: 100%;
      border: 3px solid #4286f4;
      box-sizing: border-box;
    }
    
    .resizable .resizers .resizer{
      width: 10px;
      height: 10px;
      border-radius: 50%; /*magic to turn square into circle*/
      background: white;
      border: 3px solid #4286f4;
      position: absolute;
    }
    
    .resizable .resizers .resizer.top-left {
      left: -5px;
      top: -5px;
      cursor: nwse-resize; /*resizer cursor*/
    }
    .resizable .resizers .resizer.top-right {
      right: -5px;
      top: -5px;
      cursor: nesw-resize;
    }
    .resizable .resizers .resizer.bottom-left {
      left: -5px;
      bottom: -5px;
      cursor: nesw-resize;
    }
    .resizable .resizers .resizer.bottom-right {
      right: -5px;
      bottom: -5px;
      cursor: nwse-resize;
    }

1:enter link description here

css resizeable div by dragging border not corner

2 Answers