Hello, I have grid application, which has Search Module as initial app, so the Grid gets loaded in an Iframe.
My issue is, I want the grid to display all the records, so Pagination is Total.
The issue occurs when:
-I don’t specifiy an Iframe height, this causes double scroll bars, one for the Iframe where the grid and its records are displayed, one for the whole application
I have 2 workarounds for this, but these AREN’T good solutions:
-First, set the Iframe height to be smaller than the screen height, so the iframe will end a little bit before the end of the visible screen, and this will only make a single scrollbar appear on the iframe, but the out scroll bar won’t appear as the Iframe is smaller than the display so no need for it.
-Second workaround is to set the Iframe to a huge height, like 5000px, this will make all the records fit in the iframe, and there will be only one scrollbar, the outer one.
The issue with this second workaround is that sometimes if only 10 records are displayed, the page will have height 5000px so that is not optimal.
These issues happen as iframe has no auto height…therefore you get an additional scrollbar when the grid is heigher then the iframe height…
I know there must be a solution for this, what I want to achieve is pretty straightforward, make both the Iframe and the Application page of height ‘100%’, meaning be as height as how much content there is.
I want only ONE scrollbar to display, and it must be the OUTER one, so the application one, not the inner one inside the iframe.
EDIT: to solve with issue with the Chrome debugger tool, it is pretty simple, you just inspect the page, find the IFrame code, and set the height to a value that allows to show ALL the Grid items without scrolling, for example 3000px, then the problem is fixed!
But as I have different grids with differents amount of records, there is not a fixed value that I can put, I need to dynamically have bigger or smaller Height for the iframe depending on the number of records…
EDIT 2: so I found a possible solution on Stackoverflow, they suggest to add this to the iframe tag:
<iframe src="..." onload="this.style.height=this.contentDocument.body.scrollHeight +'px';"> </iframe>
When I add this onload part with the Chrome inspect tool to my iframe, it fixes the problem!!! But now, how can I add this to my Iframe so everytime it loads it uses this?