React-grid-layout: Question about layout height and rowHeight

[abhishekjindal]

• [ ] Question

Hi,

I am trying to use the library to implement resizable panels with react. I am not sure how the height for the layouts work in grid units and how the rowHeight affects the grid elements. Can someone help me understand how these work? I am trying to scale a picture inside the grid element using the height and width of the container.

Thanks.

[stclairdaniel]

As far as I understand, rowHeight is a pixel value, and height in a multiple of rowHeight. For instance, if rowHeight=100 and a certain element has an h value of 2 in the layout, its height will end up being 200.

[abhishekjindal]

Thank you for your reply, that makes sense, I figured out the same thing.

[wzup]

@stclairdaniel

Unfortunately that is not true. I have rowHeight: 30, and h: 3. So real height must be 3 x 30px = 90px
But for some reason real height is 110px.

@STRML Why? Connected issue https://github.com/STRML/react-grid-layout/issues/800

element.style {
    color: white;
    background-color: rgb(221, 88, 38);
    width: 325px;
    height: 110px;
    position: absolute;
    touch-action: none;
    transform: translate(10px, 10px);
}

[ZachHaber]

I had an issue with this originally too, the reason for the issue is the margin that is set to 10 by default. The part of that that I think might actually be an issue is that for some reason it adds the margin again every time you resize the item. For instance in https://strml.github.io/react-grid-layout/examples/0-showcase.html, the rowHeight is 30, with a min height of 30, and they grow as follows: 30->70->110->150. Whereas if you set the margin to 0 manually, it grows like you'd expect: 30->60->90->120. What would make more sense is the growth with the margin to be more like 40->70->100->130, since I don't see a reason for the margin to increase in size so much.
From the docs:
// Margin between items [x, y] in px.
margin: ?[number, number] = [10, 10],

// Padding inside the container [x, y] in px
containerPadding: ?[number, number] = margin,

[rherms]

Is this not considered a bug? It seems weird to me that I go to specify my height in pixels (I am using a rowHeight of 1) and then that's not what actually is the height because of all this margin adding. Then I have to do a bunch of arithmetic to get my row heights correct.

[RaviDasari]

I think this is a bug and we should fix this.

[STRML]

It's not a bug. Please search the repository, where you will see this explained half a dozen times.

[lonelydatum]

I found it in the docs:

static defaultProps = {
margin: [10, 10],
}

[mustak-tg]

Hi https://github.com/STRML,
how can we give our own width to content as it is taking default width and height as
width: 119px;
height: 150px;
when we wrapping inside
isDraggable={true}
breakpoints={{lg: 1366, md:1024, sm: 768, xs:320, xxs: 0}}
cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>

                        </ResponsiveGridLayout>

[danielecr]

this is from README.md

// Margin between items [x, y] in px.
margin: ?[number, number] = [10, 10],

where is explained that a multiplication of element's height * rowHeight * margin is made for calculation of margin?
and also, what kind of feature is it?
A margin is a margin, is not a factor of multiplication for getting a real margin, at very least the term does not fit well.

Anyway, this will lead to dynamic margins based on the size of an element, it is a kind of feature that is not really a feature

Maybe I would not browse the repository to check where is said, maybe I would not make a pull request for fixing this, but someone else maybe want. @STRML why close it and say is not a bug?

I try to explain my points with an example: I setted rowHeight to 1, then margin to 0, and everything look fine. But when I want to use a margin>0 I end up having all elements occupying the double.

Real sizes with margin =[0,1], height->whole height: 1 -> 2, 2 -> 4, 3 -> 6, 4 -> 8

Maybe you are experiencing something different, but for sure the only option as of now for me is to define the element height= real height + 10, and margin 0,0