How to decrease the size of combobox header in Blazor

[chandradev]

I was going thought the combobox control of blazor. I need to decrease the width of combobox top and popup should be as same as marked with green line.

while decrease the combobox width then it is also decreasing the width of  popop content. is it possible to customize the width as per as our design ?

I have taken code snippet from your tutorial only

@page "/ComboBox"

   

       

           

               

                   

Emp ID	First Name	Designation

               

               

                   

@((context as EmployeeData).EmployeeID)

@((context as EmployeeData).FirstName)

@((context as EmployeeData).Designation)

               

           

           

       

   

@code{

   

    public class EmployeeData

    {

        public string FirstName { get; set; }

        public string EmployeeID { get; set; }

        public string Designation { get; set; }

        public string Country { get; set; }

    }

    List Data = new List

{

        new EmployeeData() { FirstName = "Andrew Fuller", EmployeeID = "1", Designation = "Team Lead", Country = "England"  },

        new EmployeeData() { FirstName = "Anne Dodsworth", EmployeeID = "2", Designation = "Developer", Country = "USA" },

        new EmployeeData() { FirstName = "Janet Leverling", EmployeeID = "3", Designation = "HR", Country = "USA" },

        new EmployeeData() { FirstName = "Laura Callahan", EmployeeID = "4", Designation = "Product Manager", Country = "USA" },

        new EmployeeData() { FirstName = "Margaret Peacock", EmployeeID = "5", Designation = "Developer", Country = "USA" },

        new EmployeeData() { FirstName = "Robert King", EmployeeID = "6", Designation = "Developer ", Country = "England"  },

        new EmployeeData() { FirstName = "Steven Buchanan", EmployeeID = "7", Designation = "CEO", Country = "England" },

    };

}

[Vignesh Srinivasan]

Hi chandradev, 

 

  

Yes, We can change the width of the comboBox using the property width. Please find the code example below. 

 

code  snippet:  

  

 

<SfComboBox TValue="string" TItem="EmployeeData" Placeholder="Select an employee" CssClass="e-multi-column"  Width="200px" PopupHeight="500px" PopupWidth="500px" AllowFiltering="true" DataSource="@Data"> 

            <ComboBoxTemplates TItem="EmployeeData"> 

                <HeaderTemplate> 

                    <table><tr><th class="e-text-center combo-width">Emp ID</th><th>First Name</th><th>Designation</th></tr></table> 

                </HeaderTemplate> 

                <ItemTemplate> 

                    <table><tbody><tr><td class="e-text-center combo-width">@((context as EmployeeData).EmployeeID)</td><td>@((context as EmployeeData).FirstName)</td><td>@((context as EmployeeData).Designation)</td></tr> </tbody></table> 

                </ItemTemplate> 

            </ComboBoxTemplates> 

            <ComboBoxFieldSettings Text="FirstName" Value="EmployeeID"></ComboBoxFieldSettings> 

</SfComboBox> 

 

  

Output: 

 

 

 

API link for Width: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.ComboBoxModel-1.html#Syncfusion_Blazor_InPlaceEditor_ComboBoxModel_1_Width 

 

API link for  PopupWidth: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.ComboBoxModel-1.html#Syncfusion_Blazor_InPlaceEditor_ComboBoxModel_1_PopupWidth 

 

We have created the sample based on your scenario. Please find the sample here: 

  

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBox-556899748 

  

Kindly check with the above sample. Please get back us if you need further assistance. 

  

Regards, 

  

Vignesh Srinivasan. 

[chandradev]

Thanks. 

[Prince Oliver]

Hi Chandradev, 

Most welcome. We are glad to assist you. 

Regards, 

Prince