MudAutocomplete: empty BeforeItemsTemplate occupies space and ruins layout by inserting empty div with padding in the popover list.

[irieill]

Bug type

Component

Component name

MudAutocomplete

What happened?

My use case needs to include content before the items conditionally. If the content is empty layout is ruined by inserting an empty div with padding.

<div class="mud-list mud-list-padding">
  <div class="mud-autocomplete-before-items pa-1"></div>
  ...
</div>

Expected behavior

Template should take (conditionally) empty content into account and not introduce any spacing on rendering. Spacing should be done by the content itself. This does not only apply to MudAutocomplete but all components and templates.

My current workaround is to add the following CSS style

.mud-autocomplete-before-items.pa-1:empty {
    padding: 0px !important;
}

Reproduction link

https://try.mudblazor.com/snippet/GkwyOKviyaedGjqr

Reproduction steps

1. Inspect the resulting DOM of the popover list.

Relevant log output

No response

Version (bug)

6.19.1

Version (working)

No response

What browsers are you seeing the problem on?

Edge

On which operating systems are you experiencing the issue?

Windows

Pull Request

• [ ] I would like to do a Pull Request

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[danielchalmers]

Do you know how to detect an empty fragment in Blazor? Ran into this before

[irieill]

Do you know how to detect an empty fragment in Blazor? Ran into this before

I doubt that it is not possible because RenderFragment is a delegate.

Your approach would be detecting, if the fragment is empty and not rendering the container and content at all in the component?

That still leaves the problem of responsibility for spacing if the fragment is not empty. From my point of view the fragments content is responsible for spacing not the component it is passed to. That way provides the most flexibility.

E.g. currently it is not possible to include some content with different background color without having that annoying padding-border. I mean it is possible by introducing a negative margin on the content but that is dependent on the used padding of the container. That is always subject of change and not reliable. Best way would be just not introducing it at all.

[irieill]

Actually I found another workaround by conditionally assigning the RenderFragment. Again, from my point of view that is unnecessary effort someone has to do.

[danielchalmers]

Moving the padding from a hardcoded class (pa-1) to CSS with a :not(:empty) selector makes sense. Could you submit a PR? The other template styles have the same issue.