Control the Flexmonster height with calc CSS

posted on September 9th, 2021

Answered

Ziad Abuzayyad asked on September 9, 2021

Hello Dears,
I can't control the Flexmonster with height calc 100vh - pixels
shows many scrolls and it hides the data
how I can control it to be height fit on all screen height without shows many scroll or hide data
and please find attached videos
https://we.tl/t-KkYV5Skpg5

Best Regards

1 answer

Public

Vera Didenko ⋅ Flexmonster ⋅ September 10, 2021

Hello,

Thank you for reaching out to us.

In the video, we noticed that you are modifying the height of Flexmonster's selector #fm-pivot-view.
Instead, please try setting Flexmonster's height property to 100%:

var pivot = new Flexmonster({
    container: "pivot-container",
    componentFolder: "https://cdn.flexmonster.com/",
    toolbar: true,
    height: "100%",
    report: {...}
});

This will make Flexmonster take up 100% of its parent element's height. Then you could adjust the parent element's height as desired.

<!-- Adjust the height of the "parent-container" element -->
<div id="parent-container">
   <div id="pivot-container"></div>
</div>

Please let us know if this helps.

Kind regards,
Vera

Control the Flexmonster height with calc CSS

1 answer

Please login or Register to Submit Answer