Grid doesn't initialize if container starts off hidden

[paulkarpenko]

I have two grids in two panels of a tabbed control. The grid that is in the panel that is shown on page load initializes and works fine, but the grid that starts off in a hidden panel (display: none;) does not initialize properly. The grid blocks show up in a single vertical column all the way to the left and cannot be manipulated.

Resizing the window re-initializes the failed grid and it then works fine. I've tried triggering a window resize event to try to mimic this, but to no avail. Anyone else have this issue? What else can I try? Thanks.

[Ryanmtate]

Having is a similar issue of the layout showing up in a vertical column and I am unable to re-position the elements on the grid... looking into a solution.

If you find a solution, please feel free to share :)

[paulkarpenko]

This is a pretty significant issue. Do you have any insight, @STRML? Thanks.

[STRML]

We need to remove the 'resize' listener and move to https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js, which really works quite well.

[paulkarpenko]

Any chance that can be implemented on the next branch, @STRML?

[STRML]

@nvarchar Now that 0.10 is out and there's no longer a moving target, would be a ripe opportunity for a PR. I've spent all the time I can this week on this project.

[mikeatm]

This issue is still present, has anyone found a work around? would be nice if there was a way to request rgl to recalculate the widths and heights after changing from display: none,

[phongsakornp]

I used the Grid with Tab (react-bootstrap) and I have the same problem. Re-Initialize the Grid with WidthProvider work for me.

/* Style File */
.hidden {
    display: none
}

/* Component File*/
import ReactGridLayout, { WidthProvider } from 'react-grid-layout'

var ReactGrid = WidthProvider(ReactGridLayout)

class MyComponent extends React.Component {
    state = {
        hidden: 'hidden'
    }   

    componentWillMount() {
        setTimeout(() => {          
            ReactGrid = WidthProvider(ReactGridLayout)
            this.setState({hidden: ''})                     
        }, 1000)
    }

    render() {
        return (<div className={this.state.hidden><ReactGrid>...</ReactGrid></div>)
    }
}

[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