How to change each column size

Answered
Mayank Goyal asked on June 1, 2021

Hi Team,
 
I am having a lot of data in my flexmonster table to show, like, I have 14 columns to show with multiple rows. Now I want to change size(width) of each column so that I get minimum scroll in my table. I am not able to provide particular width to each column, please suggest me a way so that I can implement it to get rid of big left-right scroll on my flexmonster table. (If there is any change in css file, please suggest)
 
Regards,
Mayank Goyal

1 answer

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster June 1, 2021

Hello,

Thank you for posting on our forum.
 
You can adjust columns' and rows' dimensions using the Table Sizes Object. It allows defining table sizes for separate columns as well as specific measures.
 
If you want to apply the same width for all the columns, use the .fm-grid-column and .fm-grid-column-mobile selectors. For example, the following rules will limit columns' width to 100 pixels:

:root {
--column-width: 100px;
}

#fm-pivot-view .fm-grid-column,
#fm-pivot-view .fm-grid-column-mobile {
max-width: var(--column-width) !important;
}

Here is the JSFiddle for demonstration: https://jsfiddle.net/flexmonster/bh32sc7y/.
 
Please let us know if it helps.
Looking forward to hearing from you.
 
Kind regards,
Illia

Please login or Register to Submit Answer