asked on January 21, 2021
Hello Team,
I noticed that Options and Format popups when displayed, if user accidentally clicks outside the popup then the popup gets closed.
In normal ways we can set the backdop property to 'static' in the modal options to stop popup from closing when clicked outside.
Is there a way we can do this in Flex Monster 2.8 and allow popups to close only by clicking on Apply/Cancel button?
Let me know if you need any further inputs to replicate the issue.
Thanks,
Tanushree
⋅ January 22, 2021
Hello,
Thank you for reaching out.
We want to explain that closing the pop-up after clicking outside its borders is the expected behavior.
Even so, you can use the following CSS rule to prevent the pop-up from closing:
.fm-popup-modal-overlay,
.fm-ui-modal-overlay {
pointer-events: none;
}
You are welcome to see the JSFiddle demonstrating this approach: https://jsfiddle.net/flexmonster/b0vcsug1/.
Please let us know if it works for your case.
Our team is looking forward to hearing from you.
Kind regards,
Illia
⋅ January 25, 2021
Thanks Illia for your response.
That didn't help but I was able to fix the issue when user hovers outside the FM view.
However, I have noticed another problem and compared the behavior of 3 popups - Fields, Options and Format.
This behavior can be reproduced in default FM fiddle v2.8.
Is there a way we can tweak Format/Options overlay to resemble Fields overlay and stop the popups from closing?
Let me know if you need any further clarification of the problem.
Thanks,
Tanushree
⋅ January 25, 2021
Hello,
Thank you for your feedback.
The difference between the Field List and Options/Formatting pop-ups is due to the difference in their origins. Options and Formatting pop-ups are part of the Toolbar, and the Field List is part of the component itself. This behavior is expected and will not be changed.
In its turn, the provided workaround allows keeping all the pop-ups opened after clicking outside their boundaries.
This is demonstrated on the JSFiddle mentioned earlier: https://jsfiddle.net/flexmonster/b0vcsug1/.
Here you can find the short clip demonstrating the behavior of this example.
Please let us know if it helps.
We are looking forward to your feedback.
Regards,
Illia
⋅ January 25, 2021
Thanks Illia.
I understand your solution works well when you click outside the popup in normal conditions.
In out case we are embedding FM grid inside a re-sizable window.
Options/Format popup doesn't disappear when we click outside but as soon as we re-size the container, the popup disappears.
I was thinking if there is a way to prevent this.
You can simulate this behavior in your fiddle by trying to reduce the height of FM container and can notice that Options/Format popup should disappear.
Thanks,
Tanushree
⋅ January 27, 2021
Hello,
Thank you for the provided details.
We have managed to reproduce the issue with closing pop-ups after resizing.
The fix for this issue will be included in the minor update ETA Feb 8.
Our team will notify you as soon as the version with a fix is released.
Feel free to contact us in case other questions arise.
Kind regards,
Illia
⋅ February 9, 2021
Hello,
We are pleased to inform you that the issue with closing pop-ups after resizing the component was fixed.
This is provided in the 2.8.26 version of Flexmonster: https://www.flexmonster.com/release-notes/.
You are welcome to update the component.
Here is our updating to the latest version tutorial for guidance: https://www.flexmonster.com/doc/updating-to-the-latest-version/.
Please let us know if everything works for you.
Best regards,
Illia
⋅ February 9, 2021
Hi Illia,
Thanks for informing us.
I checked and can see that it is working in flex Monster default fiddle.
However, it doesn't work in our case. We are still seeing as soon as we hover to next Flex Monster report, Options/Format popup disappears.
The reason what I believe is we are displaying FM toolbar only on hover on the report title and Options/Format popup have modal overlays inside FM-toolbar wrapper.
As the toolbar hides, the popup also disappears.
Is there a way the modal overlays for Options/Format can resemble Fields popup?
Thanks,
Tanushree
⋅ February 10, 2021
Hello,
Thank you for your question.
We want to explain that both Options and Format pop-ups are part of the Toolbar. It means they will be hidden with the Toolbar wrapper.
Our team would like to explain that we cannot affect this behavior from our side. Instead, we suggest adjusting the logic behind the Toolbar hiding.
For example, instead of hiding the root HTML element of the Toolbar (#fm-toolbar-wrapper), you can only hide the element representing the menu itself (#fm-toolbar-wrapper .fm-list-wrapper).
Please let us know if it works for you.
Regards,
Illia
⋅ February 10, 2021
Hi Illia,
Thanks for your response.
I have another observation, if we give height: "100%" during creation of Flex Monster report, there are spaces coming below.
We have a similar scenario and would be good to know how it can be corrected to accommodate full height of container.
Please find this fiddle for reference: https://jsfiddle.net/au37mchn/
Thanks,
Tanushree
⋅ February 11, 2021
Hello,
Thank you for your question.
Please note that the HTML element's height cannot be specified in percentage if its parent does not have a defined height. In the example you mentioned, the container is placed directly under the <html> element, which does not have any height defined.
Please consider wrapping the container with another HTML element with a defined height. For example: https://jsfiddle.net/flexmonster/mtx3L1wy/.
We hope it helps.
Regards,
Illia