Align button with Autocomplete

17 Replies
3 Participants

Created by
TÁ Társis

Platform
Blazor

Platform
Blazor

Control
AutoComplete

Created On
Jan 27, 2023 10:34 PM UTC

Last Activity On
Feb 16, 2023 11:21 AM UTC

Want to subscribe?
SIGN IN

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!

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

Placeholder="Cód."

FloatLabelType="@FloatLabelType.Auto"

ShowSpinButton="false"

TValue="long"

Format="0"

OnBlur="ViewModel.IdPessoaAoSairAsync"

@ref="IdPessoaInput">

</SfNumericTextBox>

</div>

<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>

</SfAutoComplete>

<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>

17 Replies

TÁ 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Á 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:

@*<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>

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

ClasseIcon="fa fa-search">

</DropdownListFeatures>

</span>

</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Á 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:

@*<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>

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

ClasseIcon="fa fa-search">

</DropdownListFeatures>

</span>

</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Á 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:

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

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

</SfAutoComplete>

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

ClasseIcon="fa fa-search">

</DropdownListFeatures>

</span>

</div>

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

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

</SfAutoComplete>

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

ClasseIcon="fa fa-search">

</DropdownListFeatures>

</span>

</div>

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

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

</SfAutoComplete>

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

ClasseIcon="fa fa-search">

</DropdownListFeatures>

</span>

</div>

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

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

</SfAutoComplete>

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

ClasseIcon="fa fa-search">

</DropdownListFeatures>

</span>

</div>

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

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

</SfAutoComplete>

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

ClasseIcon="fa fa-search">

</DropdownListFeatures>

</span>

</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Á 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.

<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">

</SfDropDownList>

</div>

<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>

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

ClasseIcon="fa fa-search"

AoClicar="ViewModel.AoClicarFormulariosBtnAsync"

Disabled="@(!ViewModel.FormulariosBtnEnabled)"

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

</div>

<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>

<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>

<SfTextBox

Value="@ViewModel.Faturamento.DtHrLancamentoFormatado"

Placeholder="Data/Hora"

FloatLabelType="@FloatLabelType.Auto"

Readonly="true"

CssClass="form-control">

</SfTextBox>

</div>

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

Placeholder="Cód."

FloatLabelType="@FloatLabelType.Auto"

ShowSpinButton="false"

TValue="long"

Format="0"

OnBlur="ViewModel.IdPessoaAoSairAsync"

@ref="IdPessoaInput">

</SfNumericTextBox>

</div>

<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">

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

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

</div>

</ItemTemplate>

</AutoCompleteTemplates>

</SfAutoComplete>

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

ClasseIcon="fa fa-search"

AoClicar="ViewModel.AoClicarPessoasBtnAsync"

Disabled="@(!ViewModel.PessoasBtnEnabled)"

ExibirSpinner="@(ViewModel.PesquisandoPessoas)">

</MeuBotao>

</div>

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

Mask="@ViewModel.MascaraCNPJCPF"

Placeholder="@ViewModel.CNPJCPFLbl"

FloatLabelType="@FloatLabelType.Auto"

Readonly="true">

</SfMaskedTextBox>

</div>

<SfTextBox Value="@ViewModel.CidadePrincipal"

Placeholder="Cidade"

FloatLabelType="@FloatLabelType.Auto"

Readonly="true">

</SfTextBox>

</div>

<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>

<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">

<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>

</div>

</ItemTemplate>

</AutoCompleteTemplates>

</SfAutoComplete>

<MeuBotao

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

ClasseIcon="fa fa-search"

AoClicar="ViewModel.AoClicarHistoricosBtnAsync"

Disabled="@(!ViewModel.HistoricosBtnEnabled)"

ExibirSpinner="@(ViewModel.PesquisandoHistoricos)">

</MeuBotao>

</div>

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

<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>

<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">

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

</div>

</ItemTemplate>

</AutoCompleteTemplates>

</SfAutoComplete>

<MeuBotao

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

ClasseIcon="fa fa-search"

AoClicar="ViewModel.AoClicarTiposDeOperacaoBtnAsync"

Disabled="@(!ViewModel.TiposDeOperacaoBtnEnabled)"

ExibirSpinner="@(ViewModel.PesquisandoTiposDeOperacao)">

</MeuBotao>

</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 "/"

<SfDropDownList FloatLabelType="@FloatLabelType.Auto"

PopupHeight="230px"

Placeholder="Tipo Faturamento"

TValue="String"

TItem="Country"

DataSource="Countries"

CssClass="form-control">

</SfDropDownList>

</div>

<SfNumericTextBox Placeholder="Cód."

FloatLabelType="@FloatLabelType.Auto"

ShowSpinButton="false"

TValue="long"

Format="0"

CssClass="form-control">

</SfNumericTextBox>

</div>

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

ClasseIcon="fa fa-search">

</DropdownListFeatures>

</div>

<SfNumericTextBox Placeholder="Série"

FloatLabelType="@FloatLabelType.Auto"

ShowSpinButton="false"

TValue="int"

Format="0"

CssClass="form-control"

Readonly="true"

TabIndex="-1">

</SfNumericTextBox>

</div>

<SfNumericTextBox Placeholder="Número"

FloatLabelType="@FloatLabelType.Auto"

ShowSpinButton="false"

TValue="int"

Format="0"

CssClass="form-control"

Enabled="true">

</SfNumericTextBox>

</div>

<SfNumericTextBox Placeholder="Cód."

FloatLabelType="@FloatLabelType.Auto"

ShowSpinButton="false"

TValue="long"

Format="0"

CssClass="form-control">

</SfNumericTextBox>

</div>

<SfAutoComplete PopupWidth="150%"

Width="75%"

FloatLabelType="@FloatLabelType.Auto"

TValue="string"

CssClass="CustomComponent form-control"

TItem="Country"

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

AllowFiltering="true"

DataSource="Countries">

</SfAutoComplete>

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

ClasseIcon="fa fa-search">

</DropdownListFeatures>

</div>

<SfMaskedTextBox Mask="000-000-000"

Placeholder="CNPJCPFLbl"

FloatLabelType="@FloatLabelType.Auto"

Readonly="true">

</SfMaskedTextBox>

</div>

<SfTextBox Placeholder="Cidade"

FloatLabelType="@FloatLabelType.Auto"

Readonly="true">

</SfTextBox>

</div>

<SfNumericTextBox Placeholder="Cód."

FloatLabelType="@FloatLabelType.Auto"

ShowSpinButton="false"

TValue="long"

Format="0">

</SfNumericTextBox>

</div>

<SfAutoComplete PopupWidth="150%"

Width="75%"

FloatLabelType="@FloatLabelType.Auto"

TValue="string"

TItem="Country"

CssClass="CustomComponent"

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

AllowFiltering="true"

DataSource="Countries">

</SfAutoComplete>

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

ClasseIcon="fa fa-search">

</DropdownListFeatures>

</div>

</div>

<SfNumericTextBox Placeholder="Seguro"

FloatLabelType="FloatLabelType.Auto"

ShowSpinButton="false"

TValue="decimal"

CssClass="form-control"

TabIndex="-1">

</SfNumericTextBox>

</div>

<SfNumericTextBox Placeholder="Desp. Acess."

FloatLabelType="FloatLabelType.Auto"

ShowSpinButton="false"

TValue="decimal"

CssClass="form-control"

TabIndex="-1">

</SfNumericTextBox>

</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;

}

.input-group-append {

width:20%;

float:left;

margin-top: 24px;

}

</style>

Find the screenshot here:

Find the modified sample based on your shared code example here in the attachment:

Attachment: DDLServer_e8feeb5d.zip

TÁ Társis February 7, 2023 01:07 PM UTC

I'll put here to you the part of your sended code and will explain the problem. It's not responsive look that code:

<SfNumericTextBox Placeholder="Cód."

FloatLabelType="@FloatLabelType.Auto"

ShowSpinButton="false"

TValue="long"

Format="0"

CssClass="form-control">

</SfNumericTextBox>

</div>

<SfAutoComplete PopupWidth="150%"

Width="75%"

FloatLabelType="@FloatLabelType.Auto"

TValue="string"

CssClass="CustomComponent form-control"

TItem="Country"

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

AllowFiltering="true"

DataSource="Countries">

</SfAutoComplete>

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

ClasseIcon="fa fa-search">

</DropdownListFeatures>

</div>

<SfMaskedTextBox Mask="000-000-000"

Placeholder="CNPJCPFLbl"

FloatLabelType="@FloatLabelType.Auto"

Readonly="true">

</SfMaskedTextBox>

</div>

<SfTextBox Placeholder="Cidade"

FloatLabelType="@FloatLabelType.Auto"

Readonly="true">

</SfTextBox>

</div>

that part, for example : <div class="col-sm-12 col-md-12 col-lg-5"> it says if the screen is large I should have 5 columns and the entire line if the screen is medium or small size. If you have a large screen and schrink it, it should break in diferent lines. That's the way bootstrap works. But in every examples you've send me, none works that way. I've sended to you images the way it should be and the way that's actually working. Again, in my originals examples I've sended to you, if I use SfTextBox, it works fine, but with AutoComplete doesn't.

TÁ Társis February 7, 2023 01:34 PM UTC

That's the way it should behave.

Attachment: 20230207_103326_2e1bb99b.zip

SP Sureshkumar P Syncfusion Team February 8, 2023 10:57 AM UTC

Társis, we have modified the previously attached sample based on your requirement. Find the code changes below and the modified sample in the attachment.

Find the code changes here:

<SfDropDownList FloatLabelType="@FloatLabelType.Auto"

PopupHeight="230px"

Placeholder="Tipo Faturamento"

TValue="String"

TItem="Country"

DataSource="Countries"

CssClass="form-control">

<DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings>

</SfDropDownList>

</div>

<SfNumericTextBox Placeholder="Cód."

FloatLabelType="@FloatLabelType.Auto"

ShowSpinButton="false"

TValue="long"

Format="0"

CssClass="form-control">

</SfNumericTextBox>

</div>

<SfTextBox CssClass="form-control" Placeholder="Formulário" FloatLabelType="@FloatLabelType.Auto" Readonly="true" TabIndex="-1"></SfTextBox>

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

ClasseIcon="fa fa-search">

</DropdownListFeatures>

</div>

<SfNumericTextBox Placeholder="Série"

FloatLabelType="@FloatLabelType.Auto"

ShowSpinButton="false"

TValue="int"

Format="0"

CssClass="form-control"

Readonly="true"

TabIndex="-1">

</SfNumericTextBox>

</div>

<SfNumericTextBox Placeholder="Número"

FloatLabelType="@FloatLabelType.Auto"

ShowSpinButton="false"

TValue="int"

Format="0"

CssClass="form-control"

Enabled="true">

</SfNumericTextBox>

</div>

<SfNumericTextBox Placeholder="Cód."

FloatLabelType="@FloatLabelType.Auto"

ShowSpinButton="false"

TValue="long"

Format="0"

CssClass="form-control">

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

</SfNumericTextBox>

</div>

<SfAutoComplete PopupWidth="150%"

Width="75%"

FloatLabelType="@FloatLabelType.Auto"

TValue="string"

CssClass="CustomComponent form-control"

TItem="Country"

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

AllowFiltering="true"

DataSource="Countries">

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

</SfAutoComplete>

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

ClasseIcon="fa fa-search">

</DropdownListFeatures>

</div>

<SfMaskedTextBox Mask="000-000-000"

Placeholder="CNPJCPFLbl"

FloatLabelType="@FloatLabelType.Auto"

Readonly="true">

</SfMaskedTextBox>

</div>

<SfTextBox Placeholder="Cidade"

FloatLabelType="@FloatLabelType.Auto"

Readonly="true">

</SfTextBox>

</div>

<SfNumericTextBox Placeholder="Cód."

FloatLabelType="@FloatLabelType.Auto"

ShowSpinButton="false"

TValue="long"

Format="0">

</SfNumericTextBox>

</div>

<SfAutoComplete PopupWidth="150%"

Width="75%"

FloatLabelType="@FloatLabelType.Auto"

TValue="string"

TItem="Country"

CssClass="CustomComponent"

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

AllowFiltering="true"

DataSource="Countries">

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

</SfAutoComplete>

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

ClasseIcon="fa fa-search">

</DropdownListFeatures>

</div>

</div>

<SfNumericTextBox Placeholder="Seguro"

FloatLabelType="FloatLabelType.Auto"

ShowSpinButton="false"

TValue="decimal"

CssClass="form-control"

TabIndex="-1">

</SfNumericTextBox>

</div>

<SfNumericTextBox Placeholder="Desp. Acess."

FloatLabelType="FloatLabelType.Auto"

ShowSpinButton="false"

TValue="decimal"

CssClass="form-control"

TabIndex="-1">

</SfNumericTextBox>

</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;

}

.iconWrapper {

width: 100%;

float: left;

}

.input-group-append {

width:20%;

float:left;

margin-top: 24px;

}

.form-control.e-input-group.e-control-wrapper.e-float-input {

width:75%;

}

</style>

Find the sample in the attachment:

Attachment: DDLServer_428e9ee0.zip

TÁ Társis February 8, 2023 01:13 PM UTC

Did it work for you? I'm sending the video, showing how it worked here.

Attachment: 20230208_101028_449aa9bb.zip

SS Shereen Shajahan Syncfusion Team February 9, 2023 10:32 AM UTC

Hi Társis,

For better follow-ups, we have created a ticket under your name, please follow-up in the ticket. We are marking this forum as solved.

Regards,

Shereen

TÁ Társis February 15, 2023 01:46 PM UTC

Good morning,

I don't know if I should create another topic, but the solution, like I said in our web meeting didn't work for me, even with the sample you've send me, unfortunatelly.

It symply doesn't work with other columns. It messes with the other columns.

I'm sending you 2 screens and 2 pages. One with your code and CSS's (I copyied and pasted your code in the "syncfusion line" and the other one with my original code. You'll see the diference. I'm sorry I'm boring you, I really thought it would be easier to fix, but aparentlly not.

Attachment: Syncfusion_Screen_221388e9.zip

SS Shereen Shajahan Syncfusion Team February 16, 2023 11:21 AM UTC

Hi Tarsis,

We have updated our response in the ticket. Please respond in the ticket.

Regards,

Shereen

17 Replies
3 Participants
Want to subscribe?
SIGN IN
Created by
TÁ Társis
Platform
Blazor
Control
AutoComplete
Created On
Jan 27, 2023 10:34 PM UTC
Last Activity On
Feb 16, 2023 11:21 AM UTC

Viewer Component

.NET PDF Processing Library

Conversions

Editor Component

.NET Word Processing Library

Conversions

Editor Component

.NET Excel Processing Library

Conversions

.NET PowerPoint Processing Library

Conversions

Align button with Autocomplete

Enterprise Solutions

Free Tools

Viewer Component

.NET PDF Processing Library

Conversions

Editor Component

.NET Word Processing Library

Conversions

Editor Component

.NET Excel Processing Library

Conversions

.NET PowerPoint Processing Library

Conversions

Learning

Resources

Support

Align button with Autocomplete