Formatting OptionTemplate in FluentSelect question

[nhwilly]

I am trying to show a select with the names of some color palettes left adjusted and a array of 5 colored divs right adjusted. I thought SpaceBetween would handle that, but I can't seem to make it work.

No matter what I try, I get the same result. I also noticed this happened in the docs when you had a trailing icon in a select list. If I fix the width of the label at 150px, it looks like I want, but I am sure I'll run into this again with other things.

What am I missing? As always, TIA.

Here's the code:

<FluentSelect TOption="Option<Palette>"
              Items="@PaletteOptions"
              Width="350px"
              OptionValue="@(i => i.Text)"
              Placeholder="Need help? Use a palette.">
    <OptionTemplate>
        <FluentStack Orientation="Orientation.Horizontal"
                     VerticalAlignment="VerticalAlignment.Center"
                     HorizontalAlignment="HorizontalAlignment.SpaceBetween">
            <FluentLabel
                Alignment="HorizontalAlignment.Start">@context.Text
            </FluentLabel>
            <FluentStack Orientation="Orientation.Horizontal"
                         HorizontalGap="0"
                         HorizontalAlignment="HorizontalAlignment.End">
                @foreach (var color in @context.Value.ColorsList)
                {
                    <div
                        style="width: 32px; height: 24px; background-color: @color; border-radius: 0px; margin: 1px;">
                    </div>
                }
            </FluentStack>
        </FluentStack>
    </OptionTemplate>
</FluentSelect>

And here's what it looks like:

[vnbaaij]

This is how we do it in the demo site (site settings panel):

<FluentSelect Label="Color"
                      Style="margin-bottom: 30px;"
                      Width="100%"
                      Items="@(OfficeColorUtilities.AllColors.Cast<OfficeColor?>())"
                      Height="200px"
                      @bind-SelectedOption="@OfficeColor">
            <OptionTemplate>
                <FluentStack>
                    <FluentIcon Value="@(new Icons.Filled.Size20.RectangleLandscape())"
                                Color="Color.Custom"
                                CustomColor="@GetCustomColor(@context)" />
                    <FluentLabel>@context</FluentLabel>
                </FluentStack>
            </OptionTemplate>
        </FluentSelect>

Which then looks like:

As your code is not runnable for us, it is not possible to tinker with it. Please include ready to run code...

I would try to just have a div around the color blocks instead of putting them in a stack again. And I don't think you need the alignment on the label

[vnbaaij]

Converting this to a discussion item as it is not really an issue with the library

[nhwilly]

Thanks, @vnbaaij.

In your example, the first element is a fixed width. That's why it works with your code. But...

You pointed me in the correct direction.

In my little brain, I believe in order for space-between to work, the parent container has to know how wide it is.

So I changed the code like the code below, wrapping the inner FluentStack in a fixed width div and it works as expected.

There may be a better way, but this first attempt is a start. I'd love for it to be only was wide as it needs to be, but I'm not there, yet.

Thanks, again.

 <OptionTemplate>
        <div style="width: 350px;">
            <FluentStack Orientation="Orientation.Horizontal"
                         VerticalAlignment="VerticalAlignment.Center"
                         HorizontalAlignment="HorizontalAlignment.SpaceBetween">
                <FluentLabel
                    Alignment="HorizontalAlignment.Start">@context.Text
                </FluentLabel>
                <FluentStack Orientation="Orientation.Horizontal"
                             HorizontalGap="0"
                             HorizontalAlignment="HorizontalAlignment.End">
                    @foreach (var color in @context.Value.ColorsList)
                    {
                        <div
                            style="width: 24px; height: 24px; background-color: @color; border-radius: 0px; margin: 1px;">
                        </div>
                    }
                </FluentStack>
            </FluentStack>
        </div>
    </OptionTemplate>

[nhwilly]

And this might be a different discussion, but it's related. How can I show a color palette in the select when it's collapsed. I only seem to be able to put text in there.

[vnbaaij]

It is always just text as far as I know

[nhwilly]

Expected that to be the case. Thanks. This can be closed.

[rpodevns]

@nhwilly Should be able to target the button-container slot like this.

<h4>With custom button-container</h4>
<FluentSelect ValueChanged="@(e => selectValue = e)" TOption="string">
    <FluentButton Appearance="Appearance.Accent" Slot="button-container" Style="width: 100%">@selectValue</FluentButton>
    <FluentOption Value="Value 1">Option One</FluentOption>
    <FluentOption Value="Value 2">Option Two</FluentOption>
    <FluentOption Value="Value 3">Option Three</FluentOption>
    <FluentOption Value="Value 4">Option Four</FluentOption>
</FluentSelect>
<p>
    Selected value: @selectValue
</p>

@code {
    string? selectValue;
}

[nhwilly]

I'll try it out today. Thanks!

[rpodevns]

Also, if you want to retain the dropdown indicator on the right then target the selected-value slot instead of button-container. And maybe apply some css to adjust the default margin and padding around your color palette.

    fluent-select::part(indicator) {
        margin-inline-start: 0.5em;
    }

    fluent-select::part(control) {
        padding-left: 0;
    }

The FluentSelect component wraps the fluent-select web component which has slots defined like this:

${startSlotTemplate(context, definition)}
    <slot name="button-container">
        <div class="selected-value" part="selected-value">
            <slot name="selected-value">${x => x.displayValue}</slot>
        </div>
        <div aria-hidden="true" class="indicator" part="indicator">
            <slot name="indicator">
                ${definition.indicator || ""}
            </slot>
        </div>
    </slot>
${endSlotTemplate(context, definition)}