Skip to content

fix: different padding when using MaxAutoHeight in FluentAutocomplete #3793

Closed
@MarvinKlein1508

Description

@MarvinKlein1508

🐛 Bug Report

Not sure if this intentional but the input field gets extra padding when using MaxAutoHeight although it is not necessary yet.

💻 Repro or Code Sample

https://www.fluentui-blazor.net/Autocomplete

Image

🤔 Expected Behavior

I would expect the component to grow in height only when necessary

😯 Current Behavior

The component grows in height even if there is enough space to display the current selected items

🔦 Context

When using the FluentAutocomplete component with MaxAutoHeight in combination with other components then the component could be larger be default then all other inputs.

Activity

dvoituron

dvoituron commented on May 16, 2025

@dvoituron
Collaborator

Yes, it's in the design because the internal workings are not the same.
In practice, on a website, this is not something that will be visible because you don't switch from one mode to another.

MarvinKlein1508

MarvinKlein1508 commented on May 16, 2025

@MarvinKlein1508
ContributorAuthor

@dvoituron it is visible when you have a FluentAutocomplete right next to any other default fluent input:

Image

https://try.fluentui-blazor.net/snippet/muGTYflgHzhMYMna

The fix for this is quite simple removing this 3 lines:

.fluent-autocomplete-multiselect[auto-height] ::deep fluent-text-field::part(control) {

I cannot notice any difference in the behaviour when doing so. Let me know what you think and I will create a PR for this :)

dvoituron

dvoituron commented on May 16, 2025

@dvoituron
Collaborator

Yes, of course. You can create a PR to fix this. But I don't think it will be that simple :-)
I just tried your suggestion and it doesn't completely solve the problem. I look forward to your suggestion.

MarvinKlein1508

MarvinKlein1508 commented on May 16, 2025

@MarvinKlein1508
ContributorAuthor

@dvoituron which problem do you mean exactly? This should just prevent that the height grows in the default state. It will grow when enough items have been added. Or am I missing some key detail here? :)

dvoituron

dvoituron commented on May 16, 2025

@dvoituron
Collaborator

@dvoituron which problem do you mean exactly? This should just prevent that the height grows in the default state. It will grow when enough items have been added. Or am I missing some key detail here? :)

No change: an extra space is still there and the space below the "tag" is not the same with vs without the Auto Height (without this style)

Image

MarvinKlein1508

MarvinKlein1508 commented on May 16, 2025

@MarvinKlein1508
ContributorAuthor

Ah I see. When I remove this line, everything else inside the control is shiftig as well for I guess 2px. I will take a look on it :)

MarvinKlein1508

MarvinKlein1508 commented on May 16, 2025

@MarvinKlein1508
ContributorAuthor

Can you assign me, so I can see the issue in my inbox. I'm on vacation for the next 2 weeks so I will probably pick it up later then.

added and removed
triageNew issue. Needs to be looked at
on May 16, 2025
MarvinKlein1508

MarvinKlein1508 commented on May 16, 2025

@MarvinKlein1508
ContributorAuthor

@dvoituron with some CSS magic I get this:
Image

It still changes height underneith for a few pixels when enabling MaxAutoHeight. This is due to the required padding for the tags so they won't show up all sticked together. But in general the visible stuff doesn't change anymore.

They way I did this was by removing the 3 lines from earlier and updating the CSS above to:

.fluent-autocomplete-multiselect[auto-height] ::deep fluent-text-field::part(root) {
    min-height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
    height: auto;
    padding: 4px 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Participants

    @dvoituron@MarvinKlein1508

    Issue actions

      fix: different padding when using MaxAutoHeight in FluentAutocomplete · Issue #3793 · microsoft/fluentui-blazor