React-grid-layout: Resizable not working with version 0.16.3

[msimonian77]

I'm trying to get the demos to work, for example:
https://strml.github.io/react-grid-layout/examples/6-dynamic-add-remove.html

but unfortunately the resize icon is missing on the bottom so I can't resize.
I checked and I have the style.css in the react-grid-layout.
I also see it on the elements:
div class="react-grid-item react-grid-item react-resizable react-draggable ...

I also tried multiple examples and the resize doesn't work on any of them.

Please mark the type of this issue:

• [X ] Bug
• [ ] Feature Request
• [ ] Question

[abelkbil]

you need to add the css files

[msimonian77]

Which css files? I see the styles.css that I have in my project under ...\node_modules\react-grid-layout\css

[abelkbil]

DO you have below css, when you inspect in dev tool

```
.react-grid-item > .react-resizable-handle {
position: absolute;
width: 20px;
height: 20px;
bottom: 0;
right: 0;
cursor: se-resize;
}

.react-grid-item > .react-resizable-handle::after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 5px;
    height: 5px;
    border-right: 2px solid rgba(0, 0, 0, 0.4);
    border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}
.react-resizable {
    position: relative;
}
.react-resizable-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: 0;
    right: 0;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
    background-position: bottom right;
    padding: 0 3px 3px 0;
    background-repeat: no-repeat;
    background-origin: content-box;
    box-sizing: border-box;
    cursor: se-resize;
}

````

[msimonian77]

I got it to work by adding the styles.css to my app:
import '../../node_modules/react-grid-layout/css/styles.css';

I would of think that it'll be automatic with the react-layout-grid import:
import { WidthProvider, Responsive } from "react-grid-layout";

[jog39]

It is not good practice to import from the node_modules, and as in the doc you should do:
import 'react-grid-layout/css/styles.css'

[Coodool]

As what @jog39 said above, it did solve the problem. But the path begin with a tilde helps resolve the css style from node_modules.

import '~react-grid-layout/css/styles.css'

[datapanda91]

Hey there, I'm having the same problem that the resize handler is not showing up on my components. I checked the source in the browser tools and the corresponding css rules are their. My components are also tagged with the right classes.

Any help would be appreciated.

[raviteja83]

Resize handler is received as children prop in your grid item. Render children inside your grid item and include css. it should work fine.

<RGL>
    <YourGridItem />
    <YourGridItem />
    <YourGridItem />
</RGL>

In YourGridItem's render just include {this.props.children}.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days