Is it possible to let grid elements handle size?

[JesperKihlberg]

I was wondering if it was possible to disable resize functionality and only let react-grid-layout handle placement, and my grid items could handle size (especially height)? I have quite a lot of problems getting my elements to size correctly because of warying content (elements in lists and number of rows in tables)

[r3ifi3r]

I've been wondering the same thing and found this: https://www.bountysource.com/issues/32216669-autosize-on-item

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

I have content that changes height dynamically inside grid items and I'm having difficulty figuring out how to implement what is described in the bountysource issue.

@STRML could you by chance provide a simple example of how to handle this outside of RGL like you described in the bounty source issue?

Personally, I think this would be a great feature to add to the GridItem component, albeit there may be good reasons why STRML believes this should be handled outside of RGL.

[STRML]

You'd want to measure the height/width inside the component after mount, then call back to the parent. Then, from the parent, update the layout in grid coordinates to fit.

[JesperKihlberg]

That is exactly what my solution ended up like. Measured hight of the individual elements using something like SizeMe and then call back to the grid to update the calculated grid height.

[r3ifi3r]

I'm new to react and would greatly appreciate some further direction with this. I am having trouble calling back to the responsive grid to update the layouts.

Here's what I have so far:

import React, { Component } from 'react';
import { Responsive, WidthProvider } from 'react-grid-layout';
const Grid = WidthProvider(Responsive);
import SizeMe from 'react-sizeme';
import LoginForm from './login_form';

const SizeMeLoginForm = (props) => {
  const { height } = props.size;
  return <LoginForm callbackParent={props.callbackParent(height)} />
}

const SizeAwareLoginForm = SizeMe({
  monitorHeight: true, monitorWidth: false, refreshRate: 1000
})(SizeMeLoginForm);

class Login extends Component {

  onFormHeightChange(height) {
    const newHeight = Math.ceil(height / 40);
    const newLayouts = {
      lg: [{i:"0", x: 5, y: 0, w: 2, h: newHeight}],
      md: [{i:"0", x: 5, y: 0, w: 2, h: newHeight}],
      sm: [{i:"0", x: 5, y: 0, w: 2, h: newHeight}],
      xs: [{i:"0", x: 5, y: 0, w: 2, h: newHeight}],
      xxs: [{i:"0", x: 5, y: 0, w: 2, h: newHeight}]};
    this.updateLayouts(newLayouts);
  }

  updateLayouts(layouts) {
    return false;
  }

  render() {
    const layouts = {
      lg: [{i:"0", x: 5, y: 0, w: 2, h: 5}],
      md: [{i:"0", x: 5, y: 0, w: 2, h: 5}],
      sm: [{i:"0", x: 5, y: 0, w: 2, h: 5}],
      xs: [{i:"0", x: 5, y: 0, w: 2, h: 5}],
      xxs: [{i:"0", x: 5, y: 0, w: 2, h: 5}]
    };
    const breakpoints = {lg:1200, md:996, sm:768, xs:480, xxs:0};
    const cols = {lg:12, md:10, sm:6, xs:4, xxs:2};

    return (
      <Grid layouts={layouts} breakpoints={breakpoints} cols={cols}
          rowHeight={40} autoSize={true} updateLayouts={this.updateLayouts.bind(this)}>
        <div key="0" className="ims-rgl-tile">
          <SizeAwareLoginForm callbackParent={this.onFormHeightChange.bind(this)}/>
        </div>
      </Grid>
    );
  }
}

export default Login;

Not sure if I'm approaching this correctly.. but how would I reference the Grid component and update it's layouts in the updateLayouts function? Thanks for your time.

[JesperKihlberg]

Hi T_Loyal..

I will try to explain our approach. All elements added to our Grid is wrapped in a DimensionHandler that handles all size related stuff. The code for the dimension handler is as follows (in TypeScript):

import React from "react";

import SizeMe, {SizeMeProps} from "react-sizeme";

interface IDimensionHandleElementProps extends SizeMeProps {
  onHeightChanged?(newHeight: number): void;
  onWidthChanged?(newWidth: number): void;
}

class DimensionHandleElement extends React.Component<IDimensionHandleElementProps, void> {
  componentWillReceiveProps(nextProps: IDimensionHandleElementProps) {
    if (nextProps.size.height !== this.props.size.height
      && this.props.onHeightChanged) {
      this.props.onHeightChanged(nextProps.size.height);
    }
    if (nextProps.size.width !== this.props.size.width
      && this.props.onWidthChanged) {
      this.props.onWidthChanged(nextProps.size.width);
    }
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}
const options = { monitorHeight: true };

const Dimension = SizeMe(options)(DimensionHandleElement);

interface IDimensionHandlerProps {
  onHeightChanged?(newHeight: number): void;
  onWidthChanged?(newWidth: number): void;
}

class DimensionHandler extends React.Component<IDimensionHandlerProps, void> {
  render() {
    // The dimensions of the div below is measured by Dimensions, and must be there.
    return (
      <div>
        <Dimension onHeightChanged={this.props.onHeightChanged} onWidthChanged={this.props.onWidthChanged}>
          {this.props.children}
        </Dimension>
      </div>
    );
  }
}

export default DimensionHandler;

Add to my grid with the following handler:

        <DimensionHandler onHeightChanged={this.widgetHeightChanged.bind(this, widget)}>
          {this.createElement(widget, entity, parentProps)}
        </DimensionHandler>);

  widgetHeightChanged(widget: IWidget, newHeight: number) {
    const newGridHeight = Math.ceil( (newHeight + this.margin) / (this.rowHeight + this.margin));

    if (this.heightStateChange) {
      this.widgetHeightMap.set(widget.uniqueId, newGridHeight);
    } else {
      this.heightStateChange = true;
      this.widgetHeightMap.set(widget.uniqueId, newGridHeight);
      setTimeout(() => {
          this.props.onUpdateWidgetHeight(this.widgetHeightMap);
          this.heightStateChange = false;
          this.widgetHeightMap = new Map<string, number>();
      }, 250);
    }
  }

We add setTimeout to prevent our grid from rerendering all the time, as this is very expensive. When timeout expires you should do your rerendering. I would recommend removing some of your layouts as this might complicate things, If your really need 5 different layouts, add them at a later stage, when you have got the hight thing working.

Hope this might lead you in the right direction!

[r3ifi3r]

Jesper, this gives me a better idea of what I need to do. Thanks for your response.

[abdelhakBoussis]

Hello, please guys I have the same problem and I have been trying to implement the solution given here but I couldn't because of the missing code. I was wondering if one of you have a working code to help me. I would really appreciate it.

[github-actions]

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