Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

2.8.16 CSS Issues

Answered
Scott Oliver asked on October 6, 2020

Hello,
 
Since we have moved from 2.8.15 we have noticed some CSS issues.
 
The first issue was noticed once 2.8.16 was released. Our live version running 2.8.15 had some rather odd CSS anomalies such as the background colour of the rows going outside the bounds or borders of the rows, and the fields modal option box losing all CSS.
 
We quickly learned that this CSS update was because we weren’t actually parsing the 2.8.15 CSS into our HTML, but instead (presumably) having the base javascript download the necessary CSS on load.
 
If you run up a version of FM without your base CSS for 2.8.15, I’m sure you will see what I am referring to.
 
Since upgrading to 2.8.16, we have included the relevant base CSS along with it, however our custom CSS is now broken. We cannot seem to get the following to work:

#fm-pivot-view #fm-grid-view div.fm-level-0
{background-color: #E9E9E9;}
#fm-pivot-view #fm-grid-view div.fm-level-1
{background-color: white;}
#fm-pivot-view #fm-grid-view div.fm-level-2
{background-color: white;}
#fm-pivot-view #fm-grid-view .fm-total-classic-r
{background-color: #C0E4FF !important;}
#fm-pivot-view #fm-grid-view .fm-grand-total-r
{background-color: #C0E4FF !important;}
#fm-pivot-view #fm-grid-view .fm-grand-total-c
{background-color: #C0E4FF !important;}

Apologies, if I had more time on my hands, I would send through example files or fiddle.
We are just searching for an answer so that we can reintroduce our custom CSS for summaries and totals.

9 answers

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster October 6, 2020

Hi Scott,
 
Thank you for posting your question.
 
Please note that version 2.8.16 involves particular UI accessibility improvements, which required us to change some elements’ IDs to class names.
 
As you’ve suggested, this might cause some UI issues in case you are not explicitly specifying the Flexmonster version to take the CSS from, like this:
 

<link rel="stylesheet" href="https://cdn.flexmonster.com/2.8.15/flexmonster.min.css" type="text/css">

 
This also explains why your custom CSS configurations are not working as expected any more – the #fm-grid-view is one of the IDs that were changed to class names and now looks like this: .fm-grid-view.
 
With that in mind, we would suggest updating your custom CSS configurations accordingly.
 
For your reference, please find below the full list of ID’s that were removed in version 2.8.16 and replaced with the classes of the same names:
 

"#fm-add-btn",
"#fm-add-group-view",
"#fm-aggr-display",
"#fm-aggregations-view",
"#fm-alert-view",
"#fm-and-label",
"#fm-branding-bar",
"#fm-btn-add-measure",
"#fm-btn-add-measure-2",
"#fm-btn-close-fields",
"#fm-btn-collapse-expand-all",
"#fm-btn-connect",
"#fm-btn-open-fields",
"#fm-build-version",
"#fm-calc-display",
"#fm-calculated-view",
"#fm-cancel-btn",
"#fm-chart",
"#fm-chart-legend",
"#fm-charts-filters-btn",
"#fm-charts-filters-container",
"#fm-charts-view",
"#fm-cols-filter",
"#fm-cols-resize",
"#fm-cols-sheet",
"#fm-conditions",
"#fm-conditions-dropdown",
"#fm-data-sheet",
"#fm-datepicker-1",
"#fm-datepicker-2",
"#fm-dates-filter-view",
"#fm-details-label",
"#fm-drag-handle",
"#fm-drillthrough-view",
"#fm-fields-view",
"#fm-filter-label",
"#fm-filter-sort-row",
"#fm-filter-view",
"#fm-filters-col",
"#fm-font-family",
"#fm-font-size",
"#fm-formula-input",
"#fm-func-btn-group",
"#fm-grid-view",
"#fm-header-toolbar",
"#fm-icon-display",
"#fm-info-icon",
"#fm-inp-proxy-url",
"#fm-interval-dropdown",
"#fm-labels-filter-btn",
"#fm-labels-filter-view",
"#fm-landscape-radio",
"#fm-left-scroll-button",
"#fm-link",
"#fm-list-wrapper",
"#fm-lst-columns",
"#fm-lst-hierarchies",
"#fm-lst-measures",
"#fm-lst-pages",
"#fm-lst-rows",
"#fm-measures-dropdown",
"#fm-members-filter-list",
"#fm-message-label",
"#fm-moreicon-display",
"#fm-name-input",
"#fm-next-btn",
"#fm-num-input-1",
"#fm-num-input-2",
"#fm-numbers-filter-view",
"#fm-page-filter",
"#fm-periods-dropdown",
"#fm-popUp-modal-overlay",
"#fm-popup-conditional",
"#fm-popup-format-cells",
"#fm-popup-olap",
"#fm-popup-options",
"#fm-portrait-radio",
"#fm-preloader-view",
"#fm-prev-btn",
"#fm-prompt-view",
"#fm-remove-btn",
"#fm-right-scroll-button",
"#fm-rows-filter",
"#fm-rows-resize",
"#fm-rows-sheet",
"#fm-sample",
"#fm-select-counter",
"#fm-sheet-headers",
"#fm-sort-col",
"#fm-sort-label",
"#fm-spinner",
"#fm-text-display",
"#fm-time-filter-view",
"#fm-txt-input-1",
"#fm-txt-input-2",
"#fm-ui-dp-month",
"#fm-ui-dp-year",
"#fm-values",
"#fm-values-filter-view",
"#fm-version-label",
"#fm-wrap-columns",
"#fm-wrap-measures",
"#fm-wrap-pages",
"#fm-wrap-rows"

 
Please let us know if this helps.
 
Regards,
Mykhailo

Public
Scott Oliver October 7, 2020

Hello,
 
Thank you so much for the quick response, and I appreciate the knowledge that you’ve shared regarding the classes and changes.
 
Unfortunately it hasn’t resolved my issue, I’ve attached a working example for you to review.
 
Although this example displays the same result, I will note that we typically parse the base CSS and JS through, rather than linking, incase we want to move to an offline report in the future.
 
Also, on a side note, and to save me raising a new ticket, are you able to explain why the Export PDF function that I have written at the bottom isn’t working. When executing I get an error displayed by flex.

Attachments:
Flex Example.html

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster October 8, 2020

Hi Scott,
 
Thank you for providing a sample HTML page – it helped us understand the situation better.
 
We’ve noticed that in your CSS configurations you are using selectors similar to the following:
 

#fm-pivot-view.fm-grid-view div.fm-level-0 {
background-color: #ffcde8;
}

As you’ve mentioned, this does not work – the reason for this is that you need to add a whitespace character between the first two class definitions in order for these classes to be searched for on different DOM levels:
 

#fm-pivot-view .fm-grid-view div.fm-level-0 {
background-color: #ffcde8;
}

 
Additionally, we’ve noticed you’re using the following code in your customizeCell() handler function to add the .fm-level-[n] classes to the cells:
 

function customizeCellFunction(cell, data) {
if (data.level != undefined) {
cell.addClass("fm-level-" + data.level);
}
...
...

 
Please note that the .fm-level-[n]-type classes are already provided in Flexmonster by default, so there’s no need to add them manually.
 
Answering your question regarding export, it seems like you’re using FileMaker for exporting – up until this point we’ve never really dealt with this tool so we’ll probably not be able to tell you what might be the issue here.
 
At the same time, for plain CSV & PDF export we usually suggest the following code snippet (same applies for CSV): 
 

flexmonster.exportTo('pdf', {destinationType: "plain"},
    function(result) { console.log(result.data); }
);

 
We’ve tested this on our side and everything is working as expected – feel free to try it yourself if it is viable in your use case. Also, here‘s a doc page with more examples for this API call.
 
We hope you find this helpful – do not hesitate to reach out if there’s anything else we can assist you with.
 
Kind regards,
Mykhailo

Public
Scott Oliver October 10, 2020

Mykhailo,
 
I haven’t had a chance as of yet to review and implement all of your suggestions, but I did want to fire off a thank you message for the help and assistance, we appreciate your input so very much!

Public
Scott Oliver October 11, 2020

The CSS worked perfectly, thank you! Also the PDF report I managed to resolve on Mac however on Windows when running IE 11, I receive an error saying “Failed to export: An unexpected error occurred” from flex.
 
This was the same issue I was referring to earlier. I have provided an example of my code (attached).

Attachments:
Flex Example.html

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster October 13, 2020

Hi Scott,
 
We’re glad the CSS fix worked for you!
 
Speaking of exporting issues, we’ve managed to reproduce similar behavior on our side – this is most likely related to ES6 Promise polyfills not being properly loaded to the page when using IE11. Our team will take a look at this and provide a fix with our upcoming release ETA Nov 16th.
 
In the meantime, we would suggest using the flexmonster.es5.full.js file instead – here all the necessary dependencies are already preloaded to Flexmonster and are ready to use, including polyfills for Promises.
 
We’ve just checked this and made sure the described behavior is not reproducible with flexmonster.es5.full.js.
 
Please let us know if there’s anything else we can help you with in the meantime.
 
Regards,
Mykhailo 

Public
Scott Oliver October 14, 2020

Thank you Mikey, appreciate you and your teams efforts, all is working!

Public
Scott Oliver October 15, 2020

With your changes to the UI improvements and the CSS structure, is it at all possible to export the custom CSS yet?
 
I’ve read a couple of previous forum posts, noting that it isn’t, but I’m hoping these changes may “unlock” that capability?

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster 6 days ago

Hi Scott,
 
We’re glad the suggested workaround is working well for you.
 
Answering your question, in case you’re referring to the styles added with the customizeCell() API call, please note that these are mostly not applied during export due to how this function works. The recent accessibility improvements did not introduce anything new in this regard.
 
Many clean CSS configurations, however, do get applied during export – such as the ones defined in your custom themes, conditional formatting, etc.
 
Hope this helps!
 
Kind regards,
Mykhailo

Please login or Register to Submit Answer