Closed
Description
🐛 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
🤔 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 commentedon May 16, 2025
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 commentedon May 16, 2025
@dvoituron it is visible when you have a
FluentAutocomplete
right next to any other default fluent input:https://try.fluentui-blazor.net/snippet/muGTYflgHzhMYMna
The fix for this is quite simple removing this 3 lines:
fluentui-blazor/src/Core/Components/List/FluentAutocomplete.razor.css
Line 51 in 5b31b9f
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 commentedon May 16, 2025
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 commentedon May 16, 2025
@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 commentedon May 16, 2025
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)
MarvinKlein1508 commentedon May 16, 2025
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 commentedon May 16, 2025
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.
MarvinKlein1508 commentedon May 16, 2025
@dvoituron with some CSS magic I get this:
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: