Typeahead styles missing?

[AncientGrief]

Maybe I am doing something wrong, but my search results look like this:

    <div class="container pt-4">
        <div class="row justify-content-center">
            <div class="col-6 ">
                <div class="input-group">
                    <TypeaheadInput id="in1" class="form-control bg-dark" placeholder="@("Add Item ...")"
                                @ref="refAddItemInput"
                                Data="DataProvider.Items"
                                LabelPropertySelector="x => x.Name"
                                @bind-Value="@AddItemInput"
                                SelectOnBlur="false"
                                OnInput="@(text => {SelectedItemToAdd = null; typeaheadInputValue = text;})"
                                TItem="Item">
                        <ItemTemplate>
                            <div>
                                <label>@context.Name</label>
                            </div>
                        </ItemTemplate>
                    </TypeaheadInput>
                </div>
            </div>
        </div>
    </div>

Using V 1.50 with Visual Studio 2021 .NET 6.0 and Bootstrap 5

The razor css seems to get loaded:

Not using <div class="input-group"> changes the result to this:

Do I have to add my own styles to a) Make it the same width as the input and b) Make it dark style? c) Make it work with input-group because I want to add a button to the control

[majorimi]

Hi @AncientGrief, Thanks for contacting me. Unfortunatelly components does not support theming and not tested with every Bootstrap class. But it works with Bottstrap and with some custom CSS your issues can be solved. So the answer:

Do I have to add my own styles to: a) Make it the same width as the input and? -> It is built in feature just use FitDropdownWidth property set to true. b) Make it dark style? -> No styling for the dropdown but apply CSS suggested. c) Make it work with input-group because I want to add a button to the control? -> It looks like input-group is messing with the layout and styling. Simple fix in the custom CSS you can use margin-top.

You can add this CSS to your page or styles whichever fits your need....

<style>
    .dropdown-menu {
        background: black !important;
        margin-top: 40px !important;
    }
</style>

Let me know if you need more help.