How to manage pivot table styling (CSS)
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.
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.
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.
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.
I am attaching the Zip file of the code. you can add sample API to it to work on it.
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;">
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
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
$( "#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.
Thanks Tanya, It worked.