Need a special offer?Find out if your project fits.

How to adjust the default autosizing of columns' widths

Chern Yu Zi asked on July 4, 2024


I noticed there's a default autosizing happening for all columns if no specified width is given for any of the columns. I would like to adjust the autosizing so that:

  1. It can be even more compact (as I noticed the autosizing still gives a bit of space/screen estate between the borders and value/text)
  2. It can disregard the width of the header (ie. if the value/text in the cells for that column are short in length but the header is long - I would like column to autosize to the value/text of the cells, and have the header to text-overflow: ellipses instead)


2 answers

Chern Yu Zi July 4, 2024

Just to follow up on 1.

I noticed the min-width of cells for very short value/text is set at 100px - can that be set even lower? (say 70px?)


Maksym Diachenko Maksym Diachenko Flexmonster July 5, 2024


Thank you for reaching out to us.

It is possible to make the grid more compact via CSS. Please refer to this code example:
Here, you can see the minimal column width defined as 70px, which helps to save the grid space. The columns would be aligned to fit the longest text label inside the cell. Also, a separate selector is required to reduce the size of column header cells (cells with field names and filters) since they use different selectors.
Flexmonster has the text-overflow: ellipses applied for all cells, meaning that when the size is reduced, the text will be automatically shortened.

Please let us know if this solution works for you.

Best Regards,

Please login or Register to Submit Answer