Skip to content

Incorrect usage of margin-block-end (cannot render equal height fieldset) #7044

@Seb33300

Description

@Seb33300

Describe the bug
Bootstrap 5 supports equal height columns by applying the h-100 class to the element inside a col.
You can find an example with cards on Bootstrap documentation.

Unfortunately, this cannot be used on EasyAdmin because of incorrect usage of colunm spacing.
EasyAdmin applies spacing by manually setting margin-block-end to elements.

But the proper way to manage spacing with Bootstrap 5 is to use gutter classes on row element:
https://getbootstrap.com/docs/5.3/layout/gutters/#horizontal--vertical-gutters

Or using gap classes (with on d-flex elements):
https://getbootstrap.com/docs/5.3/utilities/spacing/#gap

To Reproduce

Apply the h-100 to fieldsets:

return [
    FormField::addColumn(6),
    FormField::addFieldset('Fieldset 1')->setCssClass('h-100'),
    // ...
    FormField::addColumn(6),
    FormField::addFieldset('Fieldset 2')->setCssClass('h-100'),
    // ...
    FormField::addColumn(12),
    FormField::addFieldset('Fieldset 3'),
    // ...
]

As you can see, the vertical spacing is missing:

Image

.
If I manually add g-4 to the parent <div class="row g-4">, the result is now correct:

Image

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions