asked on January 13, 2021
Hello,
We are using Flex Monster 2.8 version and embedding it inside a re-sizable window using js-grid.
We also have a business requirement not to use double vertical scrolls as such I have disabled the outer vertical scroll in Flex monster grid.
The downside of this is when I shrink the window containing FM grid and open Fields popup, the popup always moves at the top and overrides any custom css.
Due to the popup shifting at the top, header div which lies outside the Flex Monster grid disappears.
The only way the popup doesn't move at the top is by using:
.fm-ui-popup, .fm-popup {
position: fixed !important;
transform: translate(-50%, -50%);
}
However, if the window size is less than the popup dimensions, the popup is shown at a fixed position outside the window which we don't want.
The only way the header is retained is by enabling the outer vertical scroll which we don't want in our case.
I could also replicate this issue in the FM 2.8 JsFiddle by disabling the outer html vertical scroll : https://jsfiddle.net/flexmonster/rkprvhhs/
Any help will be highly appreciated.
⋅ January 14, 2021
Hello,
Thank you for reaching out to us.
Please note that the component is not designed in the way it allows disabling the vertical scroll. If it affects other aspects of the component, you may need to implement custom workarounds for this. For example, you can develop a custom Field List that would be displayed accordingly to your needs.
Our team will be happy to assist with the workaround for your case. Still, we did not manage to reproduce the problem on our side.
Therefore, we want to ask you to modify the provided JSFiddle so that the problem can be observed.
We are looking forward to hearing from you.
Kind regards,
Illia
⋅ January 14, 2021
Thanks for reaching out to me.
Please use the following fiddle:
https://jsfiddle.net/48vu3fmb/
Alternatively steps to replicate the issue are:
html {
overflow: hidden;}
After the the outer vertical scroll is not shown.
Now if you try to resize the screen (eg: by reducing height) then the popup always shifts at the top and when popup is cancelled, the icons header is chipped off.
Let me know if this helps in replicating the design issue.
Thanks,
Tanushree
⋅ January 15, 2021
Hello,
Thank you for providing us with an example.
Our team needs some time to investigate this issue.
We will get back to you in the nearest time.
Kind regards,
Illia
⋅ January 18, 2021
Hello,
The provided sample helped to find the root of this issue.
Our team will research this issue for possible solutions and get back to you ETA Feb 8.
Feel free to contact us in case other questions arise.
Best regards,
Illia
⋅ January 18, 2021
Thanks Illia for coming back.
Currently our Flex Monster grid is embedded inside a re-sizable window.
Is there a way to shrink the popup when the window dimensions are significantly reduced?
Currently all popups in FM 2.8 version are fixed size.
Thanks,
Tanushree
⋅ January 20, 2021
Hello,
Thank you for your question.
We want to confirm that the pop-up windows' dimensions are fixed in Flexmonster. Currently, it is not possible to adjust their dimensions.
We suggest developing custom UI controls that would resize accordingly to the window's dimensions.
All the built-in component's and the Toolbar's pop-up windows use our open API. It means you can use the listed methods to create the desired UI controls.
We hope it helps.
Please contact us in case other questions arise.
Kind regards,
Illia
⋅ January 26, 2021
Hello,
We are glad to announce that the issue with unexpected scrolling after opening pop-ups was fixed.
This is included in the 2.8.25 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 it works for you.
Best regards,
Illia
⋅ January 26, 2021
Thanks Illia for your response!
I will try the latest version and let you know my observations.
Thanks,
Tanushree
⋅ January 27, 2021
I tried the latest version 2.8.25 and it looks like the header doesn't disappear on popup re-size.
Many thanks for fixing it!
However, I have another observation:
If the width of the FM window is reduced then horizontal scroll doesn't appear.
Is there a way where we can use media queries to do the following:
If the width is less than a certain number say 300px and there is only one column then hide horizontal scroll.
Else if the width is 50% of screen and there are too many columns present then enable horizontal scroll.
Alternatively, you can suggest the best way to get around this scenario.
Let me know if you need further inputs to understand the issue.
Thanks,
Tanushree
⋅ January 28, 2021
Hello,
Thank you for your feedback.
Concerning the horizontal scroll issue.
The horizontal scroll is automatically created when the container width becomes too small to display all the columns.
Please note that the horizontal scroll is aligned with the bottom of the container. It means the whole container needs to be visible in order to display both horizontal and vertical scrollbars. Therefore, we suggest making sure the container is fully visible in your case.
In case horizontal scroll is still absent, please prepare an example that would demonstrate this issue.
Finally, we want to draw your attention to the system requirements of the component. The minimal recommended size for the pivot table component is 400×300px, according to our documentation.
Please let us know if it helps.
We are looking forward to hearing from you.
Kind regards,
Illia
⋅ February 1, 2021
Hi Illia,
In our case we have multiple flex monster grids generated on the same screen and each fm grid is embedded inside a re-sizable container (using gridstack js).
In order to simulate the scenario when container is re-sized, if you try to decrease the height of fm grid in the below fiddle, you will notice that horizontal scroll flickers and once re-size is stopped then it disappears.
https://jsfiddle.net/0oyjkpud/
Thanks,
Tanushree
⋅ February 1, 2021
Hello,
Thank you for providing us with details about the issue.
However, we did not manage to reproduce the problem following the steps you mentioned.
Could you please record a short screencast that would demonstrate the inconsistent behavior?
We are looking forward to hearing from you.
Best regards,
Illia
⋅ February 8, 2021
Hello,
Our team is wondering if you had some time to prepare the screencast that would demonstrate the issue.
We are looking forward to hearing from you.
Regards,
Illia
⋅ February 8, 2021
Hello Illia,
We have found a workaround for the horizontal scroll issue.
Thanks for following up on this.
Regards,
Tanushree
