How to span the resizeable-handle throughout the div
kayesn786 opened this issue · comments
Thanks for opening an issue!
Just a question. In current implementation, the resize-handle cursor comes at particular positions. is there a way that i can make it to span the entire div?
.react-resizable-handle {
position: absolute;
width: 20px;
height: 20px;
display: inline-block;
background-repeat: no-repeat;
background-origin: content-box;
box-sizing: border-box;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+");
background-position: bottom right;
padding: 0 3px 3px 0;
}
Thanks.
as i didn't need that resize icon so i created a custom component as handle it is very basic one and i believe you can adapt it to your needs.
Custom handle component
const handle = () => {
return <div className="handle" />
}
Styles
.handle {
background-color: red;
width: 3px;
height: 100vh;
display: inline-block;
position: absolute;
right: 0px;
}
.handle:hover{
cursor: e-resize;
}
and pass the custom component to ResizableBox
ResizableBox
<ResizableBox
className="box"
width={firstProps.width}
height={firstProps.height}
handle={handle()}
minConstraints={[100, 100]}
resizeHandles={[
'e',
]}
axis="x"
onResize={(e,d) => onFirstChange(e,d)}
>
<span className="text">{"<ResizableBox>"}</span>
</ResizableBox>