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

[Daniel Koffler]

Hello,

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

Daniel

Attachment: Input.png_32e8796f.zip

[UdhayaKumar Duraisamy]

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>

    </SfComboBox>

[Daniel Koffler]

Thanks.

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.

[UdhayaKumar Duraisamy]

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:
https://blazor.syncfusion.com/documentation/combobox/style

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.