How to decrease the size of combobox header in Blazor
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" },
};
}
SIGN IN To post a reply.
3 Replies
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:
Kindly check with the above sample. Please get back us if you need further assistance.
Regards,
Vignesh Srinivasan.
SIGN IN To post a reply.
