I am rendering my igGrid inside of an accordion body. I set the height on my igGrid so that the vertical scrollbar will show in the grid properly. It all works fine until I render my grid headers vertically. When I do that (which obviously adjust the height of the header row), then the vertical scrollbar does not render. It just pushes rows off below the bottom extent of the accordion body.
Is there a way for me to force it to render the vertical scrollbar?
Hello rsimm,
Thank you for posting in our community.
In order to ensure your issue is addressed correctly could you please provide me a small isolated sample where this issue is reproducible. It is essential to include all the css classes used for styling the headers.
This is going to be highly appreciated and will help me investigate this matter further.
Looking forward to hearing from you.
I found the problem...Modernizr. I'm not sure exactly what in Modernizr was causing the problem, but I don't really need it in this project so I got rid of it and the issue is gone. I did try to recreate it using the latest Modernizr, and I could not. I had the default installation of Modernizr in my project originally.
However I did find a separate, but similar issue. If you look at the attached example which renders igGrid with vertical headers, you will see that it does not properly offset the headers to adjust for the horizontal space needed by the vertical scrollbar.
When the igGrid initially renders, the headers extend to the maximum width of the grid (as if the vertical scrollbar does not exist). However, if you then click the "+" or "-" sign which will re-assign the dataSource, then it will adjust the headers to allow for the vertical scrollbar.
Hi rsimm,
Can we provide you any further help regarding this matter?
Tsanna
Thank you for providing me your sample project.
I believe the reason for your issue is the fact that autofitLastColumn property is set to false. I changed this property to true and the scrollbar appeared correctly.
var options = { autoAdjustHeight: true, autoGenerateColumns: false, autofitLastColumn: true, . . .
var options = {
autoAdjustHeight: true,
autoGenerateColumns: false,
autofitLastColumn: true,
.
Alternatively, you could try setting the width property for every column.
I am attaching the modified sample for your reference.
Please test it on your side and let me know what is the result.