Styling Autocomplete

[horacioj]

Hi,

I've read https://www.syncfusion.com/forums/161233/change-style-of-autocomplete but it isn't what I'm looking for.

I've also read https://blazor.syncfusion.com/documentation/autocomplete/style but it isn't helping.

I think I could be able to figure out all I need if there is any way to keep the dropdown open so I can see in the browser's developer tools the html, the css classes, etc. I know it is a stupid question, but is there any way to accomplish this? 

I'm customizing the styles via the SCSS files grabbed via NPM.

I couldn't find how to change the textbox border color when it has the focus (it is still showing the theme - tailwind -  default color). I also would like to change the text size for the options, and because I'm using grouping, I also would like to change the group names style.

This is the content of my current custom.scss file, in case it helps:

$is-inter-loaded: 1; /*this is to prevent: @import url('https://fonts.google... */
$font-family: 'my-custom-font';
/* this is to have access to all the named variables /*
@import '../node_modules/@syncfusion/blazor-themes/SCSS-Themes/base/tailwind.scss'; 

/* my overrides */
$primary: $black;
$input-box-border-radius: 0;
$primary-text-color: $white;
$primary-light: $cool-gray-500;
$primary-lighter: $cool-gray-400;

@import '../node_modules/@syncfusion/blazor-themes/SCSS-Themes/inputs/textbox/tailwind.scss';
@import '../node_modules/@syncfusion/blazor-themes/SCSS-Themes/inputs/rating/tailwind.scss';
@import '../node_modules/@syncfusion/blazor-themes/SCSS-Themes/dropdowns/auto-complete/tailwind.scss';

Thank you

[horacioj]

To be more specific, this is what I mean (see the screenshot below).

I think I should be able to set the border color changing some SASS variable, but I couldn't find which one is it. Anyway, if I have to change this using custom CSS in the component, it would be fine too.

Regarding the other styles, the idea is to add the proper CSS rules in the component, but I don't know which rules should I override.

Thanks

[Sureshkumar P]

Hi Horacioj,

Query 1: I think I could be able to figure out all I need if there is any way to keep the dropdown open so I can see in the browser's developer tools the html, the css classes, etc. I know it is a stupid question, but is there any way to accomplish this?

You can restrict the popup close by cancel the popup close event to achieve your requirement.

Find the code example here:

<SfAutoComplete TItem="GameFields" TValue="string" PopupHeight="230px" Placeholder="e.g. Basketball" @bind-Value="@DropDownValue" DataSource="@Games">

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

    <AutoCompleteFieldSettings Value="Text" />

</SfAutoComplete>

 

@code {

    public class GameFields

    {

        public string ID { get; set; }

        public string Text { get; set; }

    }

    private List<GameFields> Games = new List<GameFields>()

    {

        new GameFields(){ ID= "Game1", Text= "American Football" },

        new GameFields(){ ID= "Game2", Text= "Badminton" },

        new GameFields(){ ID= "Game3", Text= "Basketball" },

        new GameFields(){ ID= "Game4", Text= "Cricket" },

        new GameFields(){ ID= "Game5", Text= "Football" },

        new GameFields(){ ID= "Game6", Text= "Golf" },

        new GameFields(){ ID= "Game7", Text= "Hockey" },

        new GameFields(){ ID= "Game8", Text= "Rugby"},

        new GameFields(){ ID= "Game9", Text= "Snooker" },

        new GameFields(){ ID= "Game10", Text= "Tennis"}

     };

    public string DropDownValue = "Game3";

    public void OnPopupClose(PopupEventArgs args)

    {

        args.Cancel = true;

    }

}

Query 2: I couldn't find how to change the textbox border color when it has the focus (it is still showing the theme - tailwind -  default color). I also would like to change the text size for the options, and because I'm using grouping, I also would like to change the group names style.

You can refer to the below documentation to override the CSS styles of the autocomplete component.

Documentation link: https://blazor.syncfusion.com/documentation/autocomplete/style

Regards,

Sureshkumar P

[horacioj]

Thanks a lot!

[horacioj]

CSS Isolation isn't working for this control. It works only for the input box, but not for the dropdown items.

I have it inside a  "span" and the styles with "::deep"

They are being ignored.

The styles work when using "style" in the component itself.

[Mohanraj Mathaiyan]

Hi horacioj,

We understand that a popup is appearing on the body element, and that the CSS isolation is not functioning properly on the popup. To resolve this issue, we suggest including the necessary CSS in the styles tag on the layout.css page. This will allow you to customize the appearance of the popup and better meet your specific requirements.

I have attached the working sample for your reference.

Regards,

MOHANRAJ M

Attachment: Autocomplete_6bc01c76.zip

[horacioj]

Thank you, Mohanraj. That is what I did, but I was expecting the have all the css (isolated) in the .css file.

[Sureshkumar P]

Horacio,

In order for CSS isolation to work for elements within a Blazor component, the elements must be contained within a block-level element, such as a div. This is because CSS isolation works by creating a unique class name for the component and applying that class name to a block-level element within the component. Without a block-level element, the class name will not be applied and the CSS isolation will not work.

The Syncfusion AutoComplete component popup appends directly to the body. So, the CSS isolation is not applied to the popup element. By appending the popup element to a parent div element, you can use the CSS isolation to the popup element. Please refer to the shared code snippet and sample for more information.

[Index.razor]

@using Syncfusion.Blazor.DropDowns

@inject IJSRuntime JSRuntime

 

<div id="targetDiv" style="margin:130px auto;width:300px">

<SfAutoComplete ID="autocomplete" TValue="string" TItem="Country" Placeholder="e.g. Australia" @bind-Value="@AutoVal" DataSource="@Countries">

    <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>

        <AutoCompleteEvents TItem="Country" TValue="string" Opened="@OnOpenHandler"></AutoCompleteEvents>

</SfAutoComplete>

</div>

 

@code {

    private async Task OnOpenHandler(PopupEventArgs args)

    {

        await JSRuntime.InvokeAsync<object>("popupchange");

        args.Popup.OffsetX = -66; // Set based on your preferences

 

    }

}

[Script]

<script>

          function popupchange() {

              setTimeout(function () {

                  var wrapper = document.createElement('div');

                  wrapper.setAttribute('class', 'wrapper_popup');

                  wrapper.appendChild(document.querySelector('.e-ddl.e-popup.e-popup-open'));

                  document.getElementById('targetDiv').appendChild(wrapper);

              },10);

          }

    </script>

[Index.razor.css]

::deep .e-ddl.e-input-group.e-control-wrapper .e-input {

    font-size: 20px;

    font-family: emoji;

    color: #ab3243;

    background: #32a5ab;

}

::deep .e-dropdownbase .e-list-item, .e-dropdownbase .e-list-item.e-item-focus {

    background-color: #29c2b8 !important;

    color: #207cd9;

    font-family: emoji;

    min-height: 29px;

}

In the above example, the popup element is appended to the component wrapper using JSInterop and Opened event.

[Output Reference]

 

Find the sample in the attachment:

Attachment: CSSisolation1659231744_48da274c.zip