InputGroup with two HxSelect intances

[niclasrothman]

Hi everyone,
I'm trying to have a inputgroup with two HxSelect instances but having trouble to get the it working in regards to size and how it looks when resizing the browser window:

Desired Look & Feel:

The HxSelect supports InputGroups but im having trouble to understand how to use it when using another HxComponent, tried to add the second HxSelect instance in the InputGroupEndTemplate but doesnt work, e.g.

 <HxSelect
                TItem="Person"
                TValue="string"
                Data="people"
                @bind-Value="value"
                Nullable="false"
                TextSelector="@(p => p.Name)"
                ValueSelector="@(p => p.Initials)">

                <InputGroupEndTemplate>
                    <HxSelect
                        TItem="Person"
                        TValue="string"
                        Data="people"
                        @bind-Value="value"
                        Nullable="false"
                        TextSelector="@(p => p.Name)"
                        ValueSelector="@(p => p.Initials)">
                    </HxSelect>
                </InputGroupEndTemplate>
            </HxSelect>

I have also tried to just wrap to HxSelect instances in div as suggested by bootstrap but that doesnt work either, border-radius and not wrapping correct when resizing:

<div class="input-group input-group-sm d-flex">
    <HxSelect
        TItem="Person"
        TValue="string"
        Data="people"
        @bind-Value="value"
        Nullable="false"
        TextSelector="@(p => p.Name)"
        ValueSelector="@(p => p.Initials)">
    </HxSelect>
    <HxSelect
        TItem="Person"
        TValue="string"
        Data="people"
        @bind-Value="value"
        Nullable="false"
        TextSelector="@(p => p.Name)"
        ValueSelector="@(p => p.Initials)">
    </HxSelect>
</div>

Any idea, Im sure this is really easy if you know what you are doing :-)
Niclas

[crdo]

Hi @niclasrothman this is a know issue of our structure.

The desired styling can be achieved manually by wrapping the two Selects into input-group as you did and adding CssClass="flex-grow-1" InputCssClass="rounded-end-0" to the first HxSelect and CssClass="flex-grow-1" InputCssClass="rounded-start-0" to the second.

The size then has to be set on each of the Selects.

[niclasrothman]

Got it, thanks "crdo"!!!