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

Compact mode for Input Controls (e.g. ComboBox, TextBox, NumericTextBox)


I am using several input controls in a data grid. I want to reduce the data grid row height (also in edit mode), however the input controls (e.g. ComboBox) demand a certain row height.

Kindly let me know how I can achieve a more  "compact mode" for the input controls.

To be more specific: I am using the material design and want to 

  • Reduce overall control height
  • Reduce top/bottom control margins
  • Reduce space between text and bottom (red) border line. (see screenshot)
  • Reduce thickness of bottom (red) border line.
Thank you

Attachment: Input.png_32e8796f.zip

3 Replies

UD UdhayaKumar Duraisamy Syncfusion Team April 12, 2023 06:38 AM UTC

You can use the CssClass property as 'e-small', which will make the component size small. Please refer to the code snippet shared below for more clarification.

    <SfComboBox TValue="string" TItem="Country" CssClass="e-small" Placeholder="e.g. Australia" DataSource="@Countries">

        <ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings>


DK Daniel Koffler April 12, 2023 07:13 AM UTC


1) That makes it a little bit better and I was able to reduce the grid row height for a few pixels. However there is still a large padding between text and border lines. Is it possible to further reduce this padding.

2) Setting "e-small" also sets font size from 13px to 12px (theme=material). How can I keep it at 13px.

UD UdhayaKumar Duraisamy Syncfusion Team April 13, 2023 04:56 PM UTC

Based on your requirements, We would suggest referring to the Syncfusion documentation on ComboBox styling, which provides detailed information and examples on how to customize the appearance of the ComboBox control in Blazor. The link to the documentation is as follows:

If you still encounter any issues or problems, please share the following details, which will help us to validate the issue further and provide you with a better solution.

  1. A simple, runnable sample that illustrates the issue you are experiencing.
  2. issue replication steps.
  3. video illustration.

Live Chat Icon For mobile
Up arrow icon