How to span the resizeable-handle throughout the div

[kayesn786]

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.

[mfaizan1]

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>

[kayesn786]

@mfaizan1 , Thanks a lot. This is what exactly i was looking for.