asked on December 17, 2021
Hi All,
We would like to override the default behaviour of the Save toolbar button. We want it to open a custom popup where we can specify a report name. Is there an relatively easy and reliable way to add a custom popup so it looks like as built it one and works with the full screen mode?
It looks like all or most css classes of the build-in popup elements come with #fm-toolbar-wrapper in the definition and we don't know how to place our custom popups inside the #fm-toolbar-wrapper so we can reuse the styles.
We use 2.9.5 version.
Best regards,
Maksym
⋅ December 23, 2021
Hello, Maksym,
Thank you for reaching out to us.
To customize the default pop-up, we suggest overwriting the corresponding function of the Toolbar. Kindly check the flexmonster.toolbar.js file to find the necessary function. So that it could be easy to create your pop-up.
Please check the example of the custom pop-up for opening a local report: https://jsfiddle.net/flexmonster/z1x2peym/. You're welcome to customize it for your needs.
We hope it helps. You are welcome to write to us in case further questions arise.
Kind regards,
Nadia
⋅ December 27, 2021
Hi Madia,
Thank you for your answer.
The thing is that we want to display a JQuery tree view in the popup. As soon as I add the popup content as done in the example all the styles got overridden by flexmonster ones because you use ids for the style, for example #fm-toolbar-wrapper .fm-toolbar-ui li. This will always override any styles I have for the tree view li element because the style are applied mostly through classes, for example .treeview li. Is there a workaround for that? On one hand I'd like to reuse already existing styles but on the other hand I'd like to be able to customize the popup content.
If there's no workaround. Is it possible to have a custom popup which works with fullscreen mode? That is without placing it inside #fm-toolbar-wrapper element.
⋅ January 4, 2022
Hello, Maksym,
Thank you for the response.
In your case, we suggest adding !important to pop-up style properties to override all previous styling rules. Kindly note that you can reuse our pop-up code from the flexmonster.toolbar.js file to create the custom ones.
Hope this helps!
Kind regards,
Nadia
