How would you eliminate the space between 2 containers in a layout?

Imagine that I have 2 containers containing table elements, then how can I go about eliminating the space between these 2 tables such that the containers are in contact with each other, and still the 2 tables are seperate entities in the layout.

Hi Mani!

I am not sure if that solves it, but have you played around with the “gap” attribute (assuming you’re using a flexGrid layout)?

It however applies to the whole layout, so you might have issues then with other elements…


@Mani_Shankar can you provide a screenshot how it currently looks like?

I think that the issue you mean is that within the element the “empty frame” is pretty large and that you cannot fix this through the layout.
With a fixedgrid, you can actually overlap multiple containers, but I would advise against it - it has the tendency to create unwanted artifacts, especially with different resolutions.

You can also display the grid of your layout in the app builder, and determine whether unwanted extra space is within the element or part of the layout

Thanks for the potential solution ideas to the issue.

I am attaching a screenshot of the containers that I want to eliminate the gap between. They are 2 containers containing table elements, and the gap that I wish to eliminate is represented by the red and green arrow


I am sure you already tried to play around with horizontalAlignContent and horizontalAlignBox in the Containers section in your Layout

I think the problem is the 20px padding each container has. I also often tried to reduce it but failed to do so.

If you are desperately looking for a workaround, you can try the following:
Place a html element somewhere in your page which contains <style> attributes where you use the !important property to overwrite the existing paddings. I think it should be possible to only do it for div.element-spacer. I guess you then need to ensure that the overall appearance of your App is still pleasant and it might be quite tricky to place every other Apps Element in a way that it has enough space around it.

From a styleguide point of view, this spacer property should ensure that elements do not overlap and are well separated visually. Please keep in mind that this “hack” may backfire in the future as you override styleguide elements.