React-grid-layout: set initial height and width to ResponsiveReactGridLayout

[uditdubey]

how to give initial height and width to ResponsiveReactGridLayout
below is my code,
className={'layout'+ (currentSelection !== 'trade' ? ${styles.invisible}: '')}
draggableHandle='.widgetheader'
breakpoints={{lg: 1200, md: 900, sm: 600, xs: 300, xxs:0}}
cols={{lg: 10, md: 10, sm: 10, xs:0,xxs:0}}
gutter={{ lg: 1, md: 1, sm: 1, xs:1,xxs:1}}
onBreakpointChange={this.onBreakpointChange}
rowHeight={35}
data-width = {this.state.width}
layouts={this.state.layout}
onLayoutChange={this.onLayoutChange}
onResize={this.onResize.bind(this)}
isResizable={true}
autoSize={true}
margin= {[4, 6]}
preventCollision={true}
useCSSTransforms={true}
compactType={horizontal}
id="dashBoardGrid"
>

[AlanLes]

Hello, I've managed this case by adding a Wrapper component with min-height and width defined. My code looks like this:

const CustomerPortalContainer = styled.main`
    background-color: rgb(255, 255, 255);
    min-height: 90px;
    width: ${gridSize() * 100}px;
`;
const GridLayoutWithWidth = WidthProvider(GridLayout);
<GridLayoutWrapper>
    <GridLayoutWithWidth
        className="layout"
        layout={layout}
        margin={[gridSize() * 2, gridSize()]}
        cols={12}
        rowHeight={13}
        onLayoutChange={bfContext.onLayoutChange}
    >
        {renderLayout(layout)}
    </GridLayoutWithWidth>
</GridLayoutWrapper>

Does it solve your problem? :)

[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

[mahathun]

i ended up adding minHeight style directly to the component.
<ReactGridLayout width="1000px" layout={this.state.layout} onLayoutChange={this.onLayoutChange} onDrop={this.props.onDrop.bind(this)} isDroppable={true} {...this.props} style={{minHeight: '500px'}} > {this.generateDOM()} </ReactGridLayout>