React-grid-layout: autosize on item?

[kubante]

Hello,
I did not find any way to autosize the items, based on their contents. Am I missing something? If not, does anybody have an idea on the approach to take ?

My approach would have been to check weather the content in my item is overflowing and keep incrementing y as long as its overflowing. This is certainly not very elegant..

[STRML]

There's no mechanism for this directly in RGL, no. I believe it's best left to users.

I've done something like this on <Accordion>-style, component, where I needed the full-size height so the CSS animation was right. The trick is to nest an inner div and measure its height. You may already have that height information available to you. If you do, simply multiply it out to figure out how large y should be.

The formula is pretty simple (based on calcXY() from <GridItem>):

function calculateWH(widthPx, heightPx, colWidth, rowHeight, margin) {
  let w = Math.ceil((widthPx - margin[0]) / (colWidth + margin[0]));
  let h = Math.ceil((heightPx - margin[1]) / (rowHeight + margin[1]));
  return [w, h];
};

[kubante]

hey, thanks for your reply.. i have been struggling to find the right moment to perform this check. my issue is that I have variable content within the elements and only am able to perform that size measurement once i have loaded everything into the dom, which seems kind of too late for doing the layout. Can you point me in the right direction? when can I do such a check, assuming I already have the element inside the dom and can measure it.. ? thanks man!

[STRML]

You have to wait until it's in the DOM to measure it, otherwise there's no way to know how wide the columns are, since they are a percentage of the container's width.

[turnerniles]

In the function function calculateWH(widthPx, heightPx, colWidth, rowHeight, margin) are colWidth and rowHeight the values that ReactGridLayout is initialized with? I had to significantly alter the values in order to get the component pixel height to grid component height ratio correct.

[lokhmakov]

I found that react-grid-layout accept floating Height size for GridItems and create per-pixel auto resize layout with header, content, footer:

WindowSizeProvider.js

import React                from 'react'

function withWindowSize(WrappedComponent) {
  return class WindowSizeProvider extends React.Component {
    constructor(props) {
      super(props)

      this.state = {
        innerWith: 1280,
        innerHeight: 800,
      }
    }

    onWindowResize = () => {
      if (!this.mounted) return
      this.setState({
        innerWith: window.innerWidth,
        innerHeight: window.innerHeight,
      })
    }

    componentDidMount() {
      this.mounted = true
      window.addEventListener('resize', this.onWindowResize)
      this.onWindowResize()
    }

    componentWillUnmount() {
      this.mounted = false
      window.removeEventListener('resize', this.onWindowResize);
    }

    render() {
      return (
        <WrappedComponent
          { ...this.props }
          { ...this.state }
        />
      )
    }
  }
}

export default withWindowSize

Layout.js

import React, { PropTypes } from 'react'

import withStyles           from 'isomorphic-style-loader/lib/withStyles'
import s                    from './Layout.css'
import cssReactGridLayout   from '!isomorphic-style-loader!css-loader!react-grid-layout/css/styles.css'
import cssReactResizable    from '!isomorphic-style-loader!css-loader!react-resizable/css/styles.css'

import { Responsive }       from 'react-grid-layout'
import { WidthProvider }    from 'react-grid-layout'

import ReactHeight          from 'react-height'

import withWindowSize       from '../WindowSizeProvider/WindowSizeProvider'

const ResponsiveGridLayout = WidthProvider(Responsive)

import Header               from '../Header'
import Footer               from '../Footer'

// import DevTools             from '../../../core/redux/DevTools'

class Layout extends React.Component {
  static propTypes = {
    children: PropTypes.node.isRequired,

    innerHeight: PropTypes.number,
    innerWidth: PropTypes.number,
  }

  constructor(props) {
    super(props)

    const { innerHeight = 800 } = this.props

    this.state = {
      contentH: this.calcContentH(innerHeight),
    }
  }

  calcContentH = (innerHeight, contentHeight = null) =>
    innerHeight > contentHeight ? (innerHeight - 128) / 32 : contentHeight / 32

  processHeight = (props = this.props, contentHeight = null) => {
    const { innerHeight } = props
    this.setState({
      contentH: this.calcContentH(innerHeight, contentHeight)
    })
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.innerHeight != nextProps.innerHeight) {
      this.processHeight(nextProps)
    }
  }

  onChangeContentHeight = (contentHeight) => {
    this.processHeight(this.props, contentHeight)
  }

  render() {
    const { contentH } = this.state

    console.log(`Layer`, `render`, `this.state`, this.state)

    const layouts = {
      lg: [
        { i: 'header',  x: 0, y: 0, w: 12, h: 2, static: true },
        { i: 'content', x: 0, y: 2, w: 12, h: contentH, static: true  },
        { i: 'footer',  x: 0, y: contentH + 2, w: 12, h: 2, static: true }
      ]
    }

    return (
      <div className={ s.root }>

        <ResponsiveGridLayout
          margin={ [0, 0] }
          className="layout"
          layouts={ layouts }
          breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
          cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
          rowHeight={ 32 }
        >
          <div key="header" className={ s.header }>
            <Header />
          </div>
          <div key="content" className={ s.content }>
            <ReactHeight onHeightReady={ this.onChangeContentHeight }>
              <div>
                { this.props.children }
              </div>
            </ReactHeight>
          </div>
          <div key="footer" className={ s.footer }>
            <Footer />
          </div>
        </ResponsiveGridLayout>

      </div>
    )
  }
}

import { compose, graphql } from 'react-apollo'

export default compose(
  withStyles(cssReactGridLayout),
  withStyles(cssReactResizable),
  withStyles(s),
  withWindowSize,
)(Layout)

[ms88privat]

@lokhmakov what is your use case for this static layout? If you do not have many grid items and also can not readjust them, why use this library? I believe there are much more easier ways to archive your layout then. I'm just interested 👍

[preethijayanthi]

i want react grid layout without spaces inbetween them. can anyone suggest me how to keep it ...?

[dan-kez]

@preethijayanthi I believe you're looking for:

          containerPadding={[0,0]}
          margin={[0,0]}

[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