asked on March 5, 2018
Good Morning.
I have detected the following incident. Pivot table container height is messed up, on my desktop they look fine but when i open it on my laptops (As the page height differs) i can not go to end of the page. It is off the screen and it dint have min-height to set. I tried to add media queries but they are not working.
⋅ March 5, 2018
Hello Tavon,
Thank you for your question. Could you please provide us with some code sample where the issue is reproducible? It will help us a lot in our further investigation.
Waiting for the update from you.
Regards,
Dmytro
⋅ March 5, 2018
As we are using live data i am afraid we can not share the code, if possible we can do screen share or i can send you screen shots of the issue for better understating.
⋅ March 6, 2018
Hello Tavon
Thank you for your feedback. We will be grateful for the screenshots describing the problem. However, it is necessary for us to see how you are initializing the component and what the DOM structure is. Having such code example will allow us providing the solution much faster.
Regards,
Dmytro
⋅ March 6, 2018
I am attaching the Zip file of the code. you can add sample API to it to work on it.
Thanks,
⋅ March 8, 2018
Hello, Tavon,
Thank you for sharing the zip file of the code with us. Our team has carefully analyzed its contents. I am attaching file containing your code with some modifications from our side. Container height works as expected after these modifications. Please find below our explanations to the code changes:
1. Pivot is rendered into <div id="pivotContainer"></div>. To apply additional styles to the container we recommend wrapping this div into one more div and apply styles to the outer container. In your index.html we replaced this code:
<div id="pivotContainer" style="padding-bottom: 30px;">
with these lines:
<div style="position: absolute; left: 0; top: 45px; right: 0; bottom: 0;">
<div id="pivotContainer"></div>
</div>
2. Modifying height or width of inner divs inside pivot container is not recommended. In file src/css/PureCustom.css we have commented the lines changing the height of div#fm-pivot-view:
div#fm-pivot-view {
height: calc(100% - -331px) !important;
}
3. Following the logic defined in src/js/PureCustom.js, you either show dashboard and hide pivot, or vice versa. This means it is not necessary to change the height of pivot container dynamically. These two lines are commented in src/js/PureCustom.js:
$( "#pivotContainer" ).css("height","500px");
...
$( "#pivotContainer" ).css("height","50px");
Please have a look at this updated package and let us know whether everything works as expected on your side.
Regards,
Tanya
⋅ March 8, 2018
Thanks Tanya, It worked.