CODEWITHSUNDEEP
javascripthtmlreactjsmaterial-ui
Shadowvail
Shadowvail

Reputation: 528

Material UI GridTile height

I'm currently working with material ui and I'm running into an issue with GridLists. I have a GridList with multiple GridTiles and I don't see any way to change the height of each GridList separately. We are provided a prop for GridLists that let us specify the GridList cellHeight, but not for individual GridTiles. Does anyone know of a way to accomplish this?

GriList entry on material ui site Material Ui Grid List

I currently have the following (which does not work).

<GridList style={gridListStyle}>
    <GridTile style={gridStyle1} titlePosition="bottom">
        <div>
            stuff
        </div>
    </GridTile>
    <GridTile style={gridStyle2}>
        <div>
           junk
        </div>
    </GridTile>
</GridList>

Upvotes: 1

Views: 9591

Answers (3)

stritchi
stritchi

Reputation: 1

Setting minHeight: '100vh' helped me to get a grid element to height of 100%. I tried all other elements and variants and did not help.

Upvotes: 0

Nita
Nita

Reputation: 149

You can also add some flex styling, which could help you with spacing your Tiles appropriately; for examples of flex settings available in Material-UI see https://material-ui.com/layout/grid/ (don't stop just because you see grid - I've successfully implemented these properties in a GridList too!).

Upvotes: 0

Shadowvail
Shadowvail

Reputation: 528

While not an ideal solution, I ended up overriding the height of the GridTile component by adding 100% height !important. This allowed me to set the height to exactly what I needed. 

  var gridTileStyle= {
      position: 'relative',
      float: 'left',
      width: '100%',
      minHeight: '400px',
      minWidth: '664px',
      overflow: 'hidden',
      height: '100% !important'
}

This allowed the component to dynamically resize in the window as the page got smaller, without the GridTile underneathe it overlapping it. Hopefully this helps someone else in the future.

Upvotes: 1

Related Questions