Question 186845 in Html Question posted in
Some basic documentation can be found here.

Html – Hide corner slashes of resize property but functionality should work

I have implemented the resize functionality using the following code. I need to get rid of that corner slashes while using the resize property but the functionality should work. can we achieve it?

  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: horizontal;
  overflow: auto;
}

resize corner slashes

Tags:

2

Answers


  1. 0

    No, unfortunately it’s not possible, the slashes are not part of your code, so you cannot really do anything to them without affecting functionality. They are part of the browser and cannot be controlled by HTML and CSS code. If you really want to be able to resize a div element, you may need to consider implementing a custom resizing functionality using JavaScript and CSS. This would involve capturing mouse events, calculating the resizing behavior and adjusting the container’s size accordingly.

    Login or Signup to reply.
  2. 0

    With CSS

    ::-webkit-resizer selector – MDN

    Unfortunately, Firefox – like many others – does not support this either, but currently it should work in all other modern browsers.

    div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: horizontal;
  overflow: auto;
}

div::-webkit-resizer {
  display: none;
}
    <div>
  <p>Let the user resize both the height and the width of this div element.</p>

  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

    With JavaScript

    If you want to hide the resize handle in all browsers, then as an alternative solution, you will need to implement your own logic to change the width of the element when it is clicked and dragged. Here’s a short example to demonstrate how you can achieve this:

    // Get Div
const resizableDiv = document.getElementById("resizableDiv");

// Add Event when MouseDown detected
resizableDiv.addEventListener("mousedown", function(event) {
  // If sub-element clicked, skip resize (try mousedown on <p>)
  if (event.target === resizableDiv) {
    event.preventDefault();
    resizeDiv(event); // resize
  }
});

// Resize
const resizeDiv = (event) => {
  // Destructuring the event object to get clientX and clientY
  const { clientX, clientY } = event;
  // Getting the computed width and height of the resizableDiv
  const { width, height } = getComputedStyle(resizableDiv);

  const resize = (event) => {
    // Calculating the new width and height based on the initial values and mouse movement
    const newWidth = parseInt(width, 10) + event.clientX - clientX;
    const newHeight = parseInt(height, 10) + event.clientY - clientY;

    // Applying the new width and height to the resizableDiv
    Object.assign(resizableDiv.style, { width: `${newWidth}px`, height: `${newHeight}px` });
  };

  const stopResize = () => {
    // Removing the event listeners when resizing is stopped
    document.documentElement.removeEventListener("mousemove", resize);
    document.documentElement.removeEventListener("mouseup", stopResize);
  };

  // Adding event listeners for mousemove and mouseup events
  document.documentElement.addEventListener("mousemove", resize);
  document.documentElement.addEventListener("mouseup", stopResize);
};
    div {
  border: 2px solid;
  padding: 20px;
  width: 300px;
  overflow: hidden;
  cursor: nw-resize;
}

div > * {
  cursor: initial;
}
    <div id="resizableDiv">
  <p>Let the user resize both the height and the width of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search