Get Free Trial

How to make the default width for columns on the grid smaller?

Paul Schlichter asked on August 12, 2016

When creating a monthly report, how can I minimize the cell widths? Currently the widths are wider than necessary and cause page overflows (multiple pages) when exporting or printing. I have tired setColumnWidth(0, 200);

But doesn’t work. When I manually resize columns, some will resize some won’t.


7 answers

daniil August 12, 2016

Thank you for your question. 
You can change default cell width via CSS file. Please find fm-cell style in your flexmoster.css file and set the necessary value.
Please let me know if you have succeeded.
Kind regards,

Paul Schlichter August 12, 2016

This did work. I am wondering how to best handle custom css. I have added my customizations to the end of the provided css files.
I have tried creating a new custom.css file with only the changes I am making. I then linked it in the main page file. However, the original css file seems to take precedence.
Is there a way to preserve the original css file so that it can be updated then make changes in a custom file and cause it to override.

Paul Schlichter August 12, 2016

I did figure out if I enter the links to custom files at the very end of the page, then the customizations seems to work. Does that seem correct to you?
Also regarding the default cell width, it seems to work in firefox but not chrome or IE explorer

daniil August 12, 2016

Thank you for your update. I have asked our technicians to comment on the customizations and figure out the issue with the default cell width not working in Chrome and IE. 
I will keep you posted. 

daniil August 12, 2016

Thank you for giving us some time. 

You are absolutely right with the approach to modifying CSS. We recommend you writing your custom CSS in a separate file (i.e. my-flexmonster-styles.css) and keep the original styles in flexmonster.css without changes. This will help you update Flexmonster Component to the newest versions much quicker and safer. You will not break new features and will easily maintain your custom CSS.

If you want to make the default width for columns on the grid smaller, please do the following:

  1. create a separate my-flexmonster-styles.css file
  2. put there the following class: .fm-grid-column { width: 30px; }
  3. link my-flexmonster-styles.css in your HTML file after flexmonster.css, as follows:
<link rel="stylesheet" href="flexmonster.css" type="text/css" /> 
<link rel="stylesheet" href="my-flexmonster-styles.css" type="text/css" />

.fm-grid-column class should work in all browsers.


Paul Schlichter December 9, 2016

.fm-grid-column { width: 30px; } does not seem to work in version 3

daniil December 10, 2016

Thank you for reporting this and find the fix here:

Please login or Register to Submit Answer