OptionTemplate Too Narrow

[killnine]

Background

I am trying to get a single-select Autocomplete to render a list of results with more formatting than normal. However, the OptionTemplate seems to be constraining the width of the result such that they're basically unreadable.

FAQ

1. This is wrong control for single-item. Why not use a FluentSelect: Yes, I know this is just for selecting a single item. However, I need the templating ability that Autocomplete gives me for when reviewing options. If there's a way to template both the Options set and maybe even the seleted item with FluentSelect, I'd be interested for sure

2. Why not use OptionStyle: I could assign min-height to be larger. However, I'm concerned about items being different heights and having to know that ahead of time. It just seems like a hack.

Sample Repo

Sample Repo

Try it here. Perhaps I'm missing something very straightforward.

[dvoituron]

This is a design feature of FluentUI WebComponents, which "impose" the height of fluent-option items to...

fluent-option: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);

The problem will be the same with FluentSelect, as all lists use the fluent-option option to display items.

Your solution, as you said, is to configure the items using the OptionStyle attribute.
You can create a CSS variable to simplify/dynamize the rendering.

[killnine]

Thanks for the reply! That makes sense from a consistency standpoint.

Do you think OptionClass would be more appropriate for creating styling rather than the 'inline' nature of OptionStyle?

Have you seen anyone else do something like this or have any links to projects that override styles in this way? I am trying to integrate these components with an existing template, but don't have a tremendous amount of front-end experience on best practices (the template's build pipeline creates the stylesheets from scss).

BTW -- Thanks for the team's hard work on this project. I think it will be a big help for me.

[dvoituron]

For now, the only way is to use an inline style, but an OptionClass attribute could also be interesting. I'll add it in a future version. Thank you very much.

You could use a class like .fluent-autocomplete-multiselect div[role=listbox] fluent-option { ... } or you could create a template like this one, but the height of the fluent-option must be defined using the OptionStyle.

<OptionTemplate>
   <div class="my-class">...</div>
</OptionTemplate>