Allow setting Max-height and Max-width on more components?

[PascalVorwerk]

I was wondering if anyone else had this need before? I often want to define a 'maximum' allowed height and width of a container or list, but if there is no elements inside it, it can stay small.

For example a list box, you can define the height either by using 'auto', but this would mean the list could grow indefinetly. If you set the height to lets say 200px, the list will be this large even if there are no elements in the list.

Now i realize you can potentially fix this by adding another container and letting this one overflow, but i feel like adding a few properties to set this on the component itself is easier and more convenient! Thoughts?

I feel like with some extra optional properties on the components, that are purely opt-in, we can easily add some more control on the underlying components.

For example list box:

I would love to add a 'MaxHeight' and a 'MaxWidth' property to allow some more finegrained control on the sizing of the element! Potentially other components could benefit from this aswell?

[vnbaaij]

Don't think that is a good idea. Why not use some user defined CSS classes?

If we add this, the next ask could be "why not also add MinHeight?". It's all code that needs to be maintained and tested eyc

[PascalVorwerk]

Hmm main issue i have found with using classes is actually getting the right selectors on the nested components if they are set on the Fluent components... but that might just be lacking experience on how to define the selectors on my part..

But fair point! It does open up the boundaries on where do we stop setting css properties then..

[PascalVorwerk]

I'm sorry, i am reopening this! How should i ago about setting this requested 'max-height' for a list box? I've tried adding a class to the fluent list box, but this sets a class value for the fluent list box item itself, not the surrounding container. The 'Height' property of the fluent list box is set on the surrounding container:

                     <FluentListbox Height="auto" Class="entra-group-list" Style="max-height: 200px" OptionText="@(g => g.DisplayName)"
                                       OptionValue="@(g => g.Id)"
                                       Items="Groups" TOption="GetGroupResponse">

Also the styles are set directly on the list box, which results in different behaviour (the items get squashed smaller)

Changed to Q&A, cause i feel like this is just me not knowing how to set this up properly 😛

[vnbaaij]

The boundaries are wherever you want to have them. Our main objective is always going to be to have a solid implementation of the Fluent Design System.
As I've said before, we won't work against people changing it to adapt it to their needs but we're not able nor aiming to always make that easy. There is only so much we can do...

[PascalVorwerk]

I understand it might not be a requirement of the library! Any idea on how i could access the surrounding containers styles? E.g. what selectors to use? Something like .entra-group-list::parent?