2.8.16 CSS Issues

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

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

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 

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

Hi Scott,
 
We are glad to inform you that the issue with export to image and PDF was fixed for IE11.
 
This is provided in the 2.8.20 version of Flexmonster: https://www.flexmonster.com/release-notes/.
 
You are welcome to update the component. Here is our updating to the latest version guide for assistance: https://www.flexmonster.com/doc/updating-to-the-latest-version/.
 
Please let us know if everything works well for you.
 
Best regards,
Mykhailo

Hi Scott,
 
Hope you're doing great!
 
Just checking in to ask if the exporting issue has been fixed on your side. Is everything working well now, or is there still anything we can help you with?
 
We would be happy to hear your feedback.
 
Regards,
Mykhailo