Extra margin above/below table layout with Bootstrap 5

GaryNicol

I'm using the fab new layout functionality in version 2 alongside the Bootstrap 5 style, and it's working really well apart from extra space that's being created above the table. This appears to be the result of the mt-2 class that's added to each row in the layout.

<div class="row mt-2 justify-content-between">

It's compounded when I set topStart and topEnd both to null as the margin above the table then doubles in size visually, and if the bottom row is empty it also creates undesirable space below too.

Is there a way to supress this mt-2 class when the row doesn't have any layout content?

allan

It looks okay in the examples if Bootstrap 5 is selected. Can you link to a test case showing the issue please.

Allan

GaryNicol

Hi Allan,

Here's a link to the test case: https://jsfiddle.net/co68xvnk/8/

You can see that there's a cyan bar above the table due to the "mt-2" class on every row div.

I've actually managed to work around this now with the following CSS override:

.dt-container>div.row:first-child {
   margin-top: 0px !important;
}

I've also done some more investigation regarding my second comment about the problem being compounded by topStart and topEnd both being being null, and I was mistaken about this - apologies.

The row div isn't rendered when these are null, however it is rendered if these aren't explicitly set to null but don't actually contain any content because of options like searching and lengthChange set to false. It was this scenario I'd observed with double the space above the table.

So I have a workaround for the spacing via the CSS, and can avoid the extra space when there's no content in that top row by explicitly setting the content to null in the layout option.

allan

Super - thanks so much for the investigation! I think I'm okay with it having a little bit of margin so it fits in with the flow of the document, but the double margin is definitely an issue that I'd like to resolve.

I'll need to investigate, but checking that the child row elements are empty is going to need a fairly nasty CSS incantation...

Allan