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.
Thanks
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,
Daniil
Thanks,
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.
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
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.
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:
my-flexmonster-styles.css
file.fm-grid-column { width: 30px; }
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.
Daniil
.fm-grid-column { width: 30px; }
does not seem to work in version 3
Paul,
Thank you for reporting this and find the fix here:
https://s3.amazonaws.com/flexmonster/xplornet/FLEXMONSTER-2016-XPLORNET-DEC10.zip
Regards