We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Align button with Autocomplete

Good evening,

I'm trying to align one button at the end of SfAutoComplete component, without success. It breaks the line and do a mess with the alignment.

If I use a SfTextBox it works perfectly. I'll put here the part of my code where it happens.

I used to use the SfTextBox, the part which is commented, but now I'll want to use SfAutoComplete. What can I do?

Thanks in advance!


<div class="row">

            <div class="col-sm-12 col-md-12 col-lg-1 align-self-end">

                <div class="input-group">

                    <SfNumericTextBox @bind-Value="@ViewModel.Faturamento.Pessoa.Id"

                                      Placeholder="Cód."

                                      FloatLabelType="@FloatLabelType.Auto"

                                      ShowSpinButton="false"

                                      TValue="long"

                                      Format="0"

                                      OnBlur="ViewModel.IdPessoaAoSairAsync"

                                      @ref="IdPessoaInput">

                        <NumericTextBoxEvents TValue="long"></NumericTextBoxEvents>

                    </SfNumericTextBox>

                </div>

            </div>


            <div class="col-sm-12 col-md-12 col-lg-5">

                <div class="input-group">

                    <SfAutoComplete CssClass="form-control" FloatLabelType="@FloatLabelType.Auto" TValue="long" @ref="NomePessoaAutocomplete" TItem="PessoaModel" Placeholder="Cliente (digite 3 caracteres para começar a pesquisar)" AllowFiltering="true" DataSource="ViewModel.PessoasAutocomplete" @bind-Value="ViewModel.Faturamento.Pessoa.Id">

                        <AutoCompleteFieldSettings Text="Nome" Value="Id"></AutoCompleteFieldSettings>

                        <AutoCompleteTemplates TItem="PessoaModel">

                            <ItemTemplate Context="ItemContext">

                                <div class="autocomplete-container">

                                    <div class="autocomplete-container-nome">@ItemContext.Nome </div>

                                    <div class="autocomplete-container-cnpj">@ItemContext.CNPJFormatado </div>

                                    <div class="autocomplete-container-enderecoprincipal"> @($"{ItemContext.EnderecoPrincipal?.Cidade.Nome} - {ItemContext.EnderecoPrincipal?.Cidade.UF}") </div>

                                </div>

                            </ItemTemplate>

                        </AutoCompleteTemplates>

                        <AutoCompleteEvents TValue="long" TItem="PessoaModel" Filtering="ViewModel.AoFiltrarPessoaAutocomplete" ValueChange="AoMudarValor"></AutoCompleteEvents>

                    </SfAutoComplete>


                    <div class="input-group-append">

                        <span class ="input-group-text">

                            <MeuBotao ClasseCSS="btn btn-info btn-sm btn-block"

                                ClasseIcon="fa fa-search"

                                AoClicar="ViewModel.AoClicarPessoasBtnAsync"

                                Disabled="@(!ViewModel.PessoasBtnEnabled)"

                                ExibirSpinner="@(ViewModel.PesquisandoPessoas)">

                            </MeuBotao>

                        </span>


                    </div>





                    @*<SfTextBox CssClass="form-control"

                        @bind-Value="@ViewModel.Faturamento.Pessoa.Nome"

                        Placeholder="Cliente"

                        FloatLabelType="@FloatLabelType.Auto"

                        Readonly="@(!ViewModel.NomePessoaImputEnabled)"

                        OnBlur="ViewModel.NomePessoaAoSairAsync">

                    </SfTextBox>*@


                </div>

            </div>


17 Replies

Társis January 29, 2023 04:16 PM UTC

O forgot to send my MeuBotao component. There it goes!


Attachment: MeuBotao_594f025d.zip


SP Sureshkumar P Syncfusion Team January 30, 2023 11:20 AM UTC

Hi Társis,

Based on your inquiry, it seems that you want to customize the list item in the autocomplete popup element. Our recommendation is to use the itemtemplate feature for this purpose. You can find more information about the itemtemplate in our documentation at

https://blazor.syncfusion.com/documentation/autocomplete/templates#item-template

If we have misunderstood your requirements, please provide us with a detailed description or video/image representation so we can assist you with a more accurate solution.

Regards,

Sureshkumar P



Társis January 30, 2023 12:32 PM UTC

Good morning,


I'm sending you my page with two images: one with Autocomplete and one with Textbox.

I've marked the diferences with a rectangle, so you can see what is happening.

I would like the same behavior (components alignment) I'm getting with TextBox.


Attachment: Alignment_with_Autocomplete_278e4455.zip


SP Sureshkumar P Syncfusion Team January 31, 2023 09:47 AM UTC

Társis, you can achieve your requirement by CSS style customization as like below.

Find the code example here:

<div class="col-sm-12 col-md-12 col-lg-5">

    <div class="input-group">

        @*<SfTextBox ID="text"></SfTextBox>*@

        <SfAutoComplete TValue="string" CssClass="CustomComponent" Width="75%" TItem="Country" Placeholder="e.g. Australia" @bind-Value="@AutoVal" DataSource="@Countries">

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

        </SfAutoComplete>

        <div class="input-group-append">

            <span class="input-group-text">

                <DropdownListFeatures ClasseCSS="btn btn-info btn-sm btn-block"

                                      ClasseIcon="fa fa-search">

                </DropdownListFeatures>

            </span>

        </div>

    </div>

</div>

 

@code {

    public string AutoVal;

 

    public class Country

    {

        public string Name { get; set; }

        public string Code { get; set; }

    }

 

    List<Country> Countries = new List<Country>

{

        new Country() { Name = "Australia", Code = "AU" },

        new Country() { Name = "Bermuda", Code = "BM" },

        new Country() { Name = "Canada", Code = "CA" },

        new Country() { Name = "Cameroon", Code = "CM" },

    };

}

 

<style>

    .CustomComponent.e-ddl.e-control-container.e-control-wrapper {

        float: left;

    }

 

    .btn.btn-info.btn-sm.btn-block {

        padding: 5px;

    }

</style>


Find the screenshot here:


Find the modified sample here in the attachment:


Attachment: DDLServer_4446aac1.zip


Társis February 2, 2023 11:00 PM UTC

Good evening,

the alignment in the bigger screen got perfect. But now I'm facing a problem with the smaller screens. I'm sending you my razor files and the screens pictures, marked in a red rectangles.

Thanks in advance!


Attachment: Autocomplete_54f1cc06.zip


SP Sureshkumar P Syncfusion Team February 3, 2023 09:51 AM UTC

Társis, you can achieve your requirement by set the wrapper element width as 100%.

Find the code changes here:

<div class="col-sm-12 col-md-12 col-lg-5">

    <div class="input-group">

        @*<SfTextBox ID="text"></SfTextBox>*@

        <SfAutoComplete TValue="string" CssClass="CustomComponent" Width="75%" TItem="Country" Placeholder="e.g. Australia" @bind-Value="@AutoVal" DataSource="@Countries">

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

        </SfAutoComplete>

        <div class="input-group-append">

            <span class="input-group-text">

                <DropdownListFeatures ClasseCSS="btn btn-info btn-sm btn-block"

                                      ClasseIcon="fa fa-search">

                </DropdownListFeatures>

            </span>

        </div>

    </div>

</div>

 

@code {

    public string AutoVal;

 

    public class Country

    {

        public string Name { get; set; }

        public string Code { get; set; }

    }

 

    List<Country> Countries = new List<Country>

{

        new Country() { Name = "Australia", Code = "AU" },

        new Country() { Name = "Bermuda", Code = "BM" },

        new Country() { Name = "Canada", Code = "CA" },

        new Country() { Name = "Cameroon", Code = "CM" },

    };

}

 

<style>

    .CustomComponent.e-ddl.e-control-container.e-control-wrapper {

        float: left;

    }

 

    .btn.btn-info.btn-sm.btn-block {

        padding: 5px;

    }

 

    .input-group {

        width:100%;

    }

</style>


Find the video demonstration in the attachment:


Attachment: ResponsiveIcon_4ffc7985.zip


Társis February 3, 2023 12:43 PM UTC

Unfortunatelly it didn't work,

look, it does work if you have just one column, like the example you've send me. But if you have several columns, like my shared razor file, it doesn't work. I'm sending you my screen with the result I've got.



Attachment: Medium_size_screen_49c0acb4.zip


SP Sureshkumar P Syncfusion Team February 6, 2023 10:39 AM UTC

Társis, you can achieve your requirement by setting the component width and wrapper width by the required percentage.

Find the code example here:

<div class="col-sm-12 col-md-12 col-lg-12">

    <div class="col-sm-12 col-md-12 col-lg-5">

    <div class="input-group">

        <SfAutoComplete TValue="string" CssClass="CustomComponent" Width="50%" TItem="Country" Placeholder="e.g. Australia" @bind-Value="@AutoVal" DataSource="@Countries">

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

        </SfAutoComplete>

        <div class="input-group-append">

            <span class="input-group-text">

                <DropdownListFeatures ClasseCSS="btn btn-info btn-sm btn-block"

                                      ClasseIcon="fa fa-search">

                </DropdownListFeatures>

            </span>

        </div>

    </div>

</div>

<div class="col-sm-12 col-md-12 col-lg-5">

    <div class="input-group">

        <SfAutoComplete TValue="string" CssClass="CustomComponent" Width="50%" TItem="Country" Placeholder="e.g. Australia" @bind-Value="@AutoVal" DataSource="@Countries">

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

        </SfAutoComplete>

        <div class="input-group-append">

            <span class="input-group-text">

                <DropdownListFeatures ClasseCSS="btn btn-info btn-sm btn-block"

                                      ClasseIcon="fa fa-search">

                </DropdownListFeatures>

            </span>

        </div>

    </div>

</div>

<div class="col-sm-12 col-md-12 col-lg-5">

    <div class="input-group">

        <SfAutoComplete TValue="string" CssClass="CustomComponent" Width="50%" TItem="Country" Placeholder="e.g. Australia" @bind-Value="@AutoVal" DataSource="@Countries">

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

        </SfAutoComplete>

        <div class="input-group-append">

            <span class="input-group-text">

                <DropdownListFeatures ClasseCSS="btn btn-info btn-sm btn-block"

                                      ClasseIcon="fa fa-search">

                </DropdownListFeatures>

            </span>

        </div>

    </div>

</div>

<div class="col-sm-12 col-md-12 col-lg-5">

    <div class="input-group">

        <SfAutoComplete TValue="string" CssClass="CustomComponent" Width="50%" TItem="Country" Placeholder="e.g. Australia" @bind-Value="@AutoVal" DataSource="@Countries">

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

        </SfAutoComplete>

        <div class="input-group-append">

            <span class="input-group-text">

                <DropdownListFeatures ClasseCSS="btn btn-info btn-sm btn-block"

                                      ClasseIcon="fa fa-search">

                </DropdownListFeatures>

            </span>

        </div>

    </div>

</div>

<div class="col-sm-12 col-md-12 col-lg-5">

    <div class="input-group">

        <SfAutoComplete TValue="string" CssClass="CustomComponent" Width="50%" TItem="Country" Placeholder="e.g. Australia" @bind-Value="@AutoVal" DataSource="@Countries">

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

        </SfAutoComplete>

        <div class="input-group-append">

            <span class="input-group-text">

                <DropdownListFeatures ClasseCSS="btn btn-info btn-sm btn-block"

                                      ClasseIcon="fa fa-search">

                </DropdownListFeatures>

            </span>

        </div>

    </div>

</div>

</div>

 

@code {

    public string AutoVal;

 

    public class Country

    {

        public string Name { get; set; }

        public string Code { get; set; }

    }

 

    List<Country> Countries = new List<Country>

{

        new Country() { Name = "Australia", Code = "AU" },

        new Country() { Name = "Bermuda", Code = "BM" },

        new Country() { Name = "Canada", Code = "CA" },

        new Country() { Name = "Cameroon", Code = "CM" },

    };

}

 

<style>

    .CustomComponent.e-ddl.e-control-container.e-control-wrapper {

        float: left;

    }

 

    .btn.btn-info.btn-sm.btn-block {

        padding: 5px;

    }

 

    .input-group {

        width:20%;

        float:left;

    }

</style>


Find the screenshot here:


Find the modified sample here in the attachment:

If you are still facing the issue, we would appreciate it if you could replicate the problem on the attached sample and provide us with detailed steps on how to do so. This will allow us to better understand the issue and provide a more accurate solution.


Attachment: DDLServer_8d7955f2.zip


Társis February 6, 2023 09:50 PM UTC

It didn't work. Would you please use my example? I'll put the code here. As you'll see (I've send it to you already, as a file), I have rows and columns. I need it respond responsive as the screen grows or shrinks. When I used to use the combination SfTextBox and MeuBotao(I've send it to you aswell, but if you prefer, you can use a common button), but using AutoComplete it doesn't work. If you use my sample, you'll se the behavior. I need the AutoComplete and button breaking the line together.


<div class="row" id="LinhaPrincipal">

            <div class="col-sm-12 col-md-12 col-lg-2 align-self-end">

                <div class="input-group">

                    <SfDropDownList FloatLabelType="@FloatLabelType.Auto"

                                    PopupHeight="230px"

                                    Placeholder="Tipo Faturamento"

                                    TValue="int"

                                    TItem="ListaModel"

                                    @bind-Value="@ViewModel.Faturamento.Tipo"

                                    DataSource="@ViewModel.TiposFaturamento"

                                    CssClass="form-control"

                                    Enabled="ViewModel.TipoFaturamentoEnabled">

                        <DropDownListFieldSettings Text="Descricao" Value="Valor"></DropDownListFieldSettings>


                        <DropDownListEvents TItem="ListaModel" TValue="int" ValueChange="@ViewModel.AoMudarTipoDeFaturamento"></DropDownListEvents>

                    </SfDropDownList>

                </div>

            </div>


            <div class="col-sm-12 col-md-12 col-lg-1 align-self-end">

                <div class="input-group">

                    <SfNumericTextBox @bind-Value="@ViewModel.Faturamento.Formulario.Id"

                                      Placeholder="Cód."

                                      FloatLabelType="@FloatLabelType.Auto"

                                      ShowSpinButton="false"

                                      TValue="long"

                                      Format="0"

                                      OnBlur="ViewModel.IdFormularioAoSairAsync"

                                      CssClass="form-control"

                                      @ref="IdFormularioInput">

                    </SfNumericTextBox>

                </div>

            </div>


            <div class="col-sm-12 col-md-12 col-md-6 col-lg-4">

                <div class="input-group">

                    <SfTextBox CssClass="form-control" @bind-Value="@ViewModel.Faturamento.Formulario.Nome" Placeholder="Formulário" FloatLabelType="@FloatLabelType.Auto" Readonly="true" TabIndex="-1"></SfTextBox>

                    <div class="input-group-append botao-input">

                        <MeuBotao ClasseCSS="btn btn-info btn-sm btn-block"

                                  ClasseIcon="fa fa-search"

                                  AoClicar="ViewModel.AoClicarFormulariosBtnAsync"

                                  Disabled="@(!ViewModel.FormulariosBtnEnabled)"

                                  ExibirSpinner="@(ViewModel.PesquisandoFormularios)"></MeuBotao>

                    </div>

                </div>

            </div>


            <div class="col-sm-12 col-md-12 col-lg-1">

                <div class="input-group">

                    <SfNumericTextBox @bind-Value="@ViewModel.Faturamento.Serie"

                                      Placeholder="Série"

                                      FloatLabelType="@FloatLabelType.Auto"

                                      ShowSpinButton="false"

                                      TValue="int"

                                      Format="0"

                                      CssClass="form-control"

                                      Readonly="true"

                                      TabIndex="-1">

                    </SfNumericTextBox>

                </div>

            </div>


            <div class="col-sm-12 col-md-12 col-lg-2 align-self-end">

                <div class="input-group">

                    <SfNumericTextBox @bind-Value="@ViewModel.Faturamento.Numero"

                                      Placeholder="Número"

                                      FloatLabelType="@FloatLabelType.Auto"

                                      ShowSpinButton="false"

                                      TValue="int"

                                      Format="0"

                                      OnBlur="ViewModel.NumeroAoSairAsync"

                                      CssClass="form-control"

                                      Enabled="@(ViewModel.Faturamento.Serie > 0)">

                    </SfNumericTextBox>

                </div>

            </div>


            

                <div class="col-sm-12 col-md-12 col-lg-2 align-self-end">

                    <div class="input-group">

                        <SfTextBox

                            Value="@ViewModel.Faturamento.DtHrLancamentoFormatado"

                            Placeholder="Data/Hora"

                            FloatLabelType="@FloatLabelType.Auto"

                            Readonly="true"

                            CssClass="form-control">

                        </SfTextBox>

                    </div>

                </div>

            </div>


        <div class="row">

            <div class="col-sm-12 col-md-12 col-lg-1 input-group">

                <SfNumericTextBox @bind-Value="@ViewModel.Faturamento.Pessoa.Id"

                                    Placeholder="Cód."

                                    FloatLabelType="@FloatLabelType.Auto"

                                    ShowSpinButton="false"

                                    TValue="long"

                                    Format="0"

                                    OnBlur="ViewModel.IdPessoaAoSairAsync"

                                    @ref="IdPessoaInput">

                    <NumericTextBoxEvents TValue="long"></NumericTextBoxEvents>

                </SfNumericTextBox>

            </div>


            <div class="col-sm-12 col-md-12 col-lg-5 input-group">

                <SfAutoComplete PopupWidth="150%"

                                Width="85%"

                                FloatLabelType="@FloatLabelType.Auto"

                                TValue="long"

                                @ref="NomePessoaAutocomplete"

                                TItem="PessoaModel"

                                Placeholder="Cliente (digite 3 caracteres para começar a pesquisar)"

                                AllowFiltering="true"

                                DataSource="ViewModel.PessoasAutocomplete"

                                @bind-Value="ViewModel.Faturamento.Pessoa.Id">

                    <AutoCompleteFieldSettings Text="Nome" Value="Id"></AutoCompleteFieldSettings>

                    <AutoCompleteTemplates TItem="PessoaModel">

                        <ItemTemplate Context="ItemContext">

                            <div class="autocomplete-container">

                                <div class="autocomplete-container-nome">@ItemContext.Nome </div>

                                <div class="autocomplete-container-cnpj">@($"{ItemContext.CNPJFormatado} - {ItemContext.EnderecoPrincipal?.Cidade.Nome} - {ItemContext.EnderecoPrincipal?.Cidade.UF}") </div>

                                <hr width="100%">

                            </div>

                        </ItemTemplate>

                    </AutoCompleteTemplates>

                    <AutoCompleteEvents TValue="long" TItem="PessoaModel" Filtering="ViewModel.AoFiltrarPessoaAutocomplete" ValueChange="ViewModel.AoMudarValorPessoaAutocomplete"></AutoCompleteEvents>

                </SfAutoComplete>


                <div class="input-group-append">

                    <MeuBotao ClasseCSS="btn btn-info btn-sm btn-block"

                                ClasseIcon="fa fa-search"

                                AoClicar="ViewModel.AoClicarPessoasBtnAsync"

                                Disabled="@(!ViewModel.PessoasBtnEnabled)"

                                ExibirSpinner="@(ViewModel.PesquisandoPessoas)">

                    </MeuBotao>

                </div>


            </div>


            <div class="col-sm-12 col-md-12 col-lg-2" >

                <SfMaskedTextBox @bind-Value="@ViewModel.Faturamento.Pessoa.CNPJ"

                                    Mask="@ViewModel.MascaraCNPJCPF"

                                    Placeholder="@ViewModel.CNPJCPFLbl"

                                    FloatLabelType="@FloatLabelType.Auto"

                                    Readonly="true">

                </SfMaskedTextBox>

            </div>


            <div class="col-sm-12 col-md-12 col-lg-4 input-group">

                <SfTextBox Value="@ViewModel.CidadePrincipal"

                           Placeholder="Cidade"

                           FloatLabelType="@FloatLabelType.Auto"

                           Readonly="true">

                </SfTextBox>

            </div>

        </div>


        <div class="row">


            <div class="col-sm-12 col-md-12 col-lg-1 input-group">

                <SfNumericTextBox @bind-Value="@ViewModel.Faturamento.Historico.Id"

                                    Placeholder="Cód."

                                    FloatLabelType="@FloatLabelType.Auto"

                                    ShowSpinButton="false"

                                    TValue="long"

                                    Format="0"

                                    OnBlur="ViewModel.IdHistoricoAoSairAsync"

                                    @ref="IdHistoricoInput">

                </SfNumericTextBox>

            </div>


            <div class="col-sm-12 col-md-12 col-md-6 col-lg-5 input-group">

                <SfAutoComplete PopupWidth="150%"

                                Width="85%"

                                FloatLabelType="@FloatLabelType.Auto"

                                TValue="long"

                                @ref="DescricaoHistoricoAutocomplete"

                                TItem="HistoricoModel"

                                Placeholder="Histórico (digite 3 caracteres para começar a pesquisar)"

                                AllowFiltering="true"

                                DataSource="ViewModel.HistoricosAutocomplete"

                                @bind-Value="ViewModel.Faturamento.Historico.Id">

                    <AutoCompleteFieldSettings Text="Descricao" Value="Id"></AutoCompleteFieldSettings>

                    <AutoCompleteTemplates TItem="HistoricoModel">

                        <ItemTemplate Context="ItemContext">

                            <div class="autocomplete-container">

                                <div class="autocomplete-container-descricao">@ItemContext.Descricao </div>

                                <div class="autocomplete-container-cnpj">@($"{ItemContext.DescricaoEntradaSaida} - Tipo: {ItemContext.DescricaoTipoHistorico} - Gera Financeiro: {ItemContext.DescricaoGeraFinanceiro} - Gera Estoque: {ItemContext.DescricaoGeraEstoque}") </div>

                                <hr width="100%">

                            </div>

                        </ItemTemplate>

                    </AutoCompleteTemplates>

                    <AutoCompleteEvents TValue="long" TItem="HistoricoModel" Filtering="ViewModel.AoFiltrarHistoricoAutocomplete" ValueChange="ViewModel.AoMudarValorHistoricoAutocomplete"></AutoCompleteEvents>

                </SfAutoComplete>


                <div class="input-group-append">

                    <MeuBotao

                        ClasseCSS="btn btn-info btn-sm btn-block"

                        ClasseIcon="fa fa-search"

                        AoClicar="ViewModel.AoClicarHistoricosBtnAsync"

                        Disabled="@(!ViewModel.HistoricosBtnEnabled)"

                        ExibirSpinner="@(ViewModel.PesquisandoHistoricos)">

                    </MeuBotao>

                </div>

            </div>


            

                @* Colocado o tipo de operação aqui para aproveitar o espaço ao lado do histórico *@

                <div class="col-sm-12 col-md-12 col-lg-1 input-group">

                    <SfNumericTextBox

                        @bind-Value="@ViewModel.Faturamento.TipoDeOperacao.Id"

                        Placeholder="Cód."

                        FloatLabelType="@FloatLabelType.Auto"

                        ShowSpinButton="false"

                        TValue="long"

                        Format="0"

                        OnBlur="ViewModel.IdTipoDeOperacaoAoSairAsync"

                        @ref="IdTipoDeOperacaoInput">

                    </SfNumericTextBox>

                </div>


                <div class="col-sm-12 col-md-12 col-md-6 col-lg-5 input-group">


                    <SfAutoComplete

                        PopupWidth="150%"

                        Width="85%"

                        FloatLabelType="@FloatLabelType.Auto"

                        TValue="long"

                        @ref="DescricaoTipoDeOperacaoAutocomplete"

                        TItem="TipoDeOperacaoModel"

                        Placeholder="Tipo de Operação (digite 3 caracteres para começar a pesquisar)"

                        AllowFiltering="true"

                        DataSource="ViewModel.TiposDeOperacaoAutocomplete"

                        @bind-Value="ViewModel.Faturamento.TipoDeOperacao.Id">

                        <AutoCompleteFieldSettings Text="Descricao" Value="Id"></AutoCompleteFieldSettings>

                        <AutoCompleteTemplates TItem="TipoDeOperacaoModel">

                            <ItemTemplate Context="ItemContext">

                                <div class="autocomplete-container">

                                    <div class="autocomplete-container-descricao">@ItemContext.Descricao </div>

                                    <hr width="100%">

                                </div>

                            </ItemTemplate>

                        </AutoCompleteTemplates>

                        <AutoCompleteEvents TValue="long" TItem="TipoDeOperacaoModel" Filtering="ViewModel.AoFiltrarTipoDeOperacaoAutocomplete" ValueChange="ViewModel.AoMudarValorTipoDeOperacaoAutocomplete"></AutoCompleteEvents>

                    </SfAutoComplete>


                    <div class="input-group-append">

                        <MeuBotao

                            ClasseCSS="btn btn-info btn-sm btn-block"

                            ClasseIcon="fa fa-search"

                            AoClicar="ViewModel.AoClicarTiposDeOperacaoBtnAsync"

                            Disabled="@(!ViewModel.TiposDeOperacaoBtnEnabled)"

                            ExibirSpinner="@(ViewModel.PesquisandoTiposDeOperacao)">

                        </MeuBotao>

                    </div>

                </div>

         </div>



SP Sureshkumar P Syncfusion Team February 7, 2023 11:59 AM UTC

Társis, as per our previous update, we have changed the styles of autocomplete component and icons to achieve your requirement

Find the code changes here:

@page "/"

 

<div class="row" id="LinhaPrincipal">

    <div class="col-sm-12 col-md-12 col-lg-2 align-self-end">

        <div class="input-group">

            <SfDropDownList FloatLabelType="@FloatLabelType.Auto"

                            PopupHeight="230px"

                            Placeholder="Tipo Faturamento"

                            TValue="String"

                            TItem="Country"

                            DataSource="Countries"

                            CssClass="form-control">

                        <DropDownListFieldSettings Text="Name" Value