Row height adjustment in Datagrid2

0
Hello.. I m using a drop down in one of the column in Datagrid2. User has to change the dropdown value. But Due to the dropdown, the row height is more than usual. Can we adjust the row height?   Thanks in advance!
asked
2 answers
0

This behavior is expected because the dropdown component has a larger default height than plain text cells, which automatically increases the row height in Data Grid 2.

Currently, Data Grid 2 doesn’t have a built-in property to manually control row height, but you can adjust it through custom styling (CSS).

Here’s what you can try:

  1. Add a custom class to your Data Grid 2 widget (for example, custom-grid).

  2. In your custom styling file (main.scss or custom.css), add the following CSS:

    .custom-grid .td, .custom-grid .datagrid2-row, .custom-grid .datagrid2-cell { height: 36px !important; /* adjust as needed */ min-height: 36px !important; } .custom-grid .form-control, .custom-grid select { height: 28px !important; /* reduces dropdown size */ padding: 2px 6px !important; font-size: 13px; }

  3. Adjust the height and padding values until it looks consistent with your other rows

answered
0

Hi Jhansi 👋

This is a common issue when using a dropdown (or any input widget) inside a column in DataGrid2 — it tends to increase the row height because of the default padding and alignment.

You can fix or minimize it with a bit of custom CSS:

 

answered