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

How to adjust the default autosizing of columns' widths

Answered
Chern Yu Zi asked on July 4, 2024

Hi,

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)

Thanks!

2 answers

Public
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?)

Thanks.

Public
Maksym Diachenko Maksym Diachenko Flexmonster July 5, 2024

Hello,

Thank you for reaching out to us.

It is possible to make the grid more compact via CSS. Please refer to this code example: https://jsfiddle.net/flexmonster/a8zeb49w/
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,
Maksym

Please login or Register to Submit Answer