Remove padding from elements in flexGrid

Hi there,

I would like to remove/edit the standard padding of all my elements in the app. At the moment, all elements have a padding of 20px in all directions. Is it somehow possible to change this value?
Things I already tried:

  • Change the padding in the global.styles
  • Set the gap in the flexGrid layout to 0px
  • Change the padding in the styles of the layout
  • Set the padding to a negative value (e.g. -10px)

Thanks for your help!

1 Like

I checked with your App-json and think the reason is a different one: The layout defined there uses “fr” to define the height of the rows (with a total of ~13.5fr distributed over 14 rows).

While I’m not really understanding even from quick googling what “fr” or fraction does for such complex configurations, I would expect it to behave something like that (filling up the available space evenly even if your element does not contain enough ‘content’)

If you use for example “px” or “em” (em might be a better but less intuitive choice, not sure how our backend works) it is possible to get the desired look without margin between the rows.

Basically original version with margins:

And changed version without margins: image

Which app are we taking about? Could you maybe give me access as I am quite interested to have a closer look.

As addition to Christophs answer:
If the padding is actually caused by using"fr", another way to achieve less padding is to use an additional empty row that causes your other rows to appear smaller and shrink together. In this way, you can keep the relative sizing of your rows and dont have to set an absolute value for the height.
I think using the “minmax()” definition could work as the definition for your empty row, as the empty row then shrinks with a smaller size of the screen.

Thanks @christoph.schober
The solution works fine. The problem was that I used “fr” for rows and columns. If you use “px” or “em” instead, you can adjust the padding between elements. :+1:

I also tried out the solution you provided Tim. However for me this just caused the App to increase in height and ultimately also to add a scrollbar. However the padding did only decrease until a minimum was reached (20px between elements).