CODEWITHSUNDEEP
javascripthtmlcssresizable
mike rodent
mike rodent

Reputation: 15642

Hide the "resizing" handle in a resizable div?

There are a few other questions which are similar, but none works or seems in the right area. I'm trying to make a table's columns' widths resizable. My table is a normal HTML table, except that it has the Bootstrap 4 class table (maybe they could have thought of a different name...!).

My css looks like this:

.resizable-div {
  resize: horizontal;
  overflow: auto;
  margin: 0px;
  padding: 0px;
  border: 1px solid black;
  display:block;
  min-width: 100px;
  min-height: 30px;
}

The relevant bit of JS where I add the cell to the table row with a resizable div inside it, and text inside that, is like this:

row.appendChild(cell);
const resizableTdDiv = document.createElement( 'div' );
resizableTdDiv.classList.add( 'resizable-div');
cell.appendChild( resizableTdDiv );
const cellTextNode = document.createTextNode(isHeader ? fieldName : value);
resizableTdDiv.appendChild(cellTextNode);

The result works fine: resizable columns. Hurrah. There is only one fly in the ointment:

enter image description here

I can get rid of the borders, of course. I just want to lose those pesky handler triangles in the bottom right corners... all of them!

I realise users have to be given an idea that they are able to resize the columns... but I'd be perfectly happy to do that some other way if I could replace those triangle icons with 100% transparent ones (for example).

Edit

Here's a JSFiddle! Amazingly easy to do!

Upvotes: 1

Views: 2104

Answers (2)

Matt Wolff
Matt Wolff

Reputation: 349

WebKit provides a pseudo-element for this ::-webkit-resizer and you can hide those triangles by applying display: none, -webkit-appearance: none, or background: transparent.

For Firefox or anything without WebKit an alternative / workaround would be to position a custom handle over top of each resizable div. This may require some different markup though.

.wrapper {
  position: relative;
  display: inline-block;
}

.resizable-div {
  position: relative;
  resize: both;
  overflow: auto;
  margin: 0px;
  padding: 0px;
  border: 1px solid black;
  display:block;
  min-width: 100px;
  min-height: 30px;
}

.handle {
  position: absolute; 
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: black;
  pointer-events: none;
}

/* ::-webkit-resizer {
    background: transparent;
} */
<div class="wrapper">
  <div class="resizable-div"></div>
  <div class="handle"></div>
</div>

Upvotes: 0

aprouja1
aprouja1

Reputation: 1810

You can do this in WebKit based browsers currently with the ::-webkit-resizer pseudo element.

div{
overflow:auto;
resize:both;
width:50%;
}

div:nth-of-type(2)::-webkit-resizer{
background:transparent;
}
<div>
Not Hidden
</div>

<div>
Hidden
</div>

Upvotes: 1

Related Questions