Styling Dropdown Portion of SfAutoComplete Component

[Nathan Nicholson]

Hi

I'm struggling to apply any styling to the popup dropdown that appears under the textbox. It appears with data from my datasource OK. I'm just unable to change the size of the font or change anything about the popup.

I've tried every suggestion I can find after Googling (e-dropdownbase, e-dropdown-popup, e-multiselect, etc, etc) with no joy. I'm able to style the textbox OK just not the dropdown.

If was any other control I'd inspect it and work it out for myself but due to it's autohiding nature I'm struggling. I've attached a heavily cutdown version of the page and the .css file.

Any help would be gratefully received.

Nathan

Attachment: SfAutocomplete_899cec44.zip

[Vinitha Jeyakumar]

Hi Nathan,

Query 1. "to apply any styling to the popup dropdown that appears under the textbox"

Your requirement to apply styles to the popup list can be achieved by customizing  the below CSS code.

Code snippet:

<style>

    .e-dropdownbase .e-list-item {

    background-color: antiquewhite;

    font-size: 20px;

}

</style>

Query 2. "If was any other control I'd inspect it and work it out for myself but due to it's autohiding nature I'm struggling"

If you want to prevent the popup from closing, you can use the OnClose event argument Cancel as like below,

Code snippet:

 <SfAutoComplete TValue="string" TItem="GameFields" Placeholder="e.g. Basketball" DataSource="@Games">

            <AutoCompleteFieldSettings Value="Text"/>

            <AutoCompleteEvents TValue="string" TItem="GameFields" OnClose="Close"></AutoCompleteEvents>

        </SfAutoComplete>

@code{

    public void Close(PopupEventArgs args){

// to prevent the popup from closing

        args.Cancel = true;

    }
}

Regards,

Vinitha