asked on January 29, 2021
Hello,
Currently we are embedding Flex Monster 2.8.25 report inside a re-sizable window using Gridstack Js.
Normally it re-sizes fine and there is no trailing space at the end.
However, when I click on the Grid icon on FM, then suddenly trailing space comes between the FM grid and window.
Is there a way we can ensure FM grid doesn't change the height of .m-ui-element or .fm-grid-layout by using javascript or jquery or FM apis?
Since this this happening in our application, I can't share working example through js-fiddle.
Attached screenshots for reference.
⋅ February 1, 2021
Hi Tanushree,
Thank you for posting your question!
We haven't managed to reproduce the described behavior so far.
Since you won't be able to share a JSFiddle sample, do you think you could take a look at the following Stackblitz example and, if possible, modify the code in a way that this behavior is reproducible?
The sample itself: https://stackblitz.com/edit/js-zgjkqe?file=index.html.
Thank you in advance, and looking forward to hearing from you.
Best regards,
Mykhailo
⋅ February 1, 2021
Thanks Mykhailo for reaching out.
Currently we have multiple flex monster grids inside equal number of gridstack containers.
I am currently trying to replicate the scenario in Stackblitz but it may take some time.
Meanwhile I investigated that if we invoke flexmonster.refresh() when ShowGrid() api is invoked then the Flex Monster grid takes the original dimensions and removes empty space.
However, since we have multiple FM grids, it's bit tricky to identify which FM grid invoked ShowGrid() api.
All our FM grids have unique container ids and have nested div elements containing 'fm-tab-grid' so adding event listener to Grid icon will require a combination of container id and the grid tab.
Do you know how it can be done in a more optimized way?
Let me know if this helps.
Attached screenshot for reference.
Thanks,
Tanushree
⋅ February 2, 2021
Hello,
I could reproduce the problem in a fiddle: https://jsfiddle.net/npc4t376/2/
You can compare the difference:
If you comment out line# 37 : flexmonster.showGrid(), then FM grid shows without any empty space.
If you uncomment and re-run the fiddle then empty space occurs at the bottom.
Let me know if this helps.
Thanks,
Tanushree
⋅ February 3, 2021
Hi Tanushree,
Thank you for providing an illustrative JSFiddle example.
Please note that in your sample, you're subscribing to the aftergriddraw event and adding the showGrid() API call to its handler. This creates an infinite loop since the showGrid() API call triggers the aftergriddraw event, thereby causing the unexpected behavior you're referring to.
With that in mind, we'd recommend restructuring your code in a way that eliminates such pitfalls.
Please let us know if there is anything else we can help you with.
Best regards,
Mykhailo
⋅ February 9, 2021
Thanks Mykhailo for the explanation.
I do agree it was not a perfect example and indeed refresh() api is invokingaftergriddraw event which is causing a recursion.
However, I didn't find any other relevant event listener to be attached to Grid icon click events.
And the only way to reproduce a scenario where Flex Monster is not re-sizing/re-painting the grid to full container dimension was in this scenario.
Could you give us some pointers if there is a workaround whenever FM doesn't re-size correctly, can we handle this through javascript to force FM re-size correctly?
Thanks,
Tanushree
⋅ February 11, 2021
Hi Tanushree,
We can't be sure what's exactly causing such behavior – we could probably identify the issue much faster if we had access to your environment, but as we understand from your first message in this thread, this wouldn't be acceptable for you.
That being said, here are some of the ideas that might help:
<div> tag:
<div id="wrapper">
<div id="pivotContainer"></div>
</div>
After this, set both width and height parameters of Flexmonster to 100%:
var pivot = new Flexmonster({
...
height: "100%",
width: "100%"
...
}
This approach often helps when resizing the component after its initialization, which resembles your use case.
We hope you find the suggestions above helpful.
Kind regards,
Mykhailo
⋅ February 11, 2021
Hi Mykhailo,
We have found the root cause of the issue.
It is because of the fm-toolbar.
By default we are hiding the toolbar and displaying it only when user hovers over title.
The toolbar height adjusted is 42px.
As we click on the Grid icon, the empty space equivalent to 42px is shown at the bottom which indicates FM grid height changed by adding additional 42px.
However, if we re-size the container (using gridstack) or click on Drillthrough columns to invoke api calls then FM grid re-sizes back to initial height correctly.
PFB some of the css we are using for FM-toolbar:
#fm-toolbar-wrapper {
display: none;
position: absolute;
z-index: 100 !important;
height: 42px !important;
}
#fm-toolbar-wrapper:hover {
display: block !important;
height: 42px !important;
}
⋅ February 11, 2021
Also, in our case we have to hide the outer vertical scroll in order to prevent showing double vertical scrolls.
But if we use "overflow-y: hidden" then this also hides horizontal scroll.
Fiddle for reference: https://jsfiddle.net/06gtex5k/
⋅ February 15, 2021
Hi Tanushree,
We're glad to hear you've managed to configure the CSS styles that best suit your use case.
Speaking of the overflow-y: hidden issue, I'm not sure we understand what you mean exactly since, in the provided JSFiddle, the horizontal scroll is displayed when necessary.
Do you think you could describe the issue in more detail or provide a sample where the described behavior would be more obvious?
Regards,
Mykhailo