Download Free Trial

How to make flex pivot responsive to the screen size resize

I have created flex pivot using below code:

var pivotGridSelector = "#" + $scope.pivotId + "_pivotGrid";
global: {
localization: "loc/en.json"
licenseKey: response.licenseKey,
beforetoolbarcreated: customizeToolbar,
componentFolder: "libs/flexmonster/",
toolbar: true,
height: "100%",
width: "100%",
report: flexReport

I have this pivot inside one of the sections on the page, these sections are resized using Kendo splitters.
Now when screen is resized / section of the screen is resized, I want pivot to be resized accordingly ?
How can I do that ?
What I see right now is it renders using the original height which was provided at the time of the creation of the pivot.
So when you resize screen more /maximise  , as height of the pivot remains the same, and remaining area is shown as blank
Where as when you resise less /minimize, as  as height of the pivot remains the same, vertical scrollbar gets more height and so its endpoint is not visible and hence even horizontal scrollbar goes missing from the screen, although its there in the DOM.
One more observation: when you do screen resize using standard minimize /maximize (or double click on the browser toolbar) issue is more consistent

2 answers

Tanya Gryshko Flexmonster 5 days ago

Hello Sohan,
Thank you for the question. When you create a new instance of pivot table you specify the id of the HTML element you would like to have as a container for the component (for example, the id of <div>). In your case it is pivotGridSelector . Setting height and width for the component actually means setting height and width for the container. Flexmonster automatically renders when the size of the container is changed. In order to make pivot being resized correctly, please verify that the sizes of the container are changing when the screen is resized. Check out the JSFiddle example with Flexmonster and Kendo splitters. Please let us know if you have additional questions.

Sohan 2 days ago

Thanks Tanya !

Please login or Register to Submit Answer