Height of panel with an html iframe is set to 100% but renders with a height of 0
I have a problem rendering an html iframe that displays a pdf. If you set the height of the panel and iframe to 100% then when it is rendered the pdf is not displayed. However, if either the panel or iframe have a fixed height, say 500px, then the pdf displays properly.
The following code is found in my controller and is fired when the user clicks on a list item in a panel that is displayed through a navigation view; the list item is associated with the name of a pdf through the use of a store and model. Also, when the pdf displays with a fixed height and the width set to 100% there are gaps between the iframe and ends of the screen.
I would like to know if anyone can find a way to have the iframe displayed with the height and width set to 100% and have the panel render the entire screen with no gaps between the iframe and the edges of the screen. I was thinking of just setting the height of the panel to the height of the viewport and making a listener for the "resize" event to update the height of the panel, but that might include the height of the navigation bar and make some of the bottom portion of the pdf unreachable.
UPDATE: I tried to implement a listener for the resize event but it updates the height before the resizing takes place. So when I maximize the iframe gets the height of the windows before it is maximized. Also, I had to set the panel's height to Ext.Element.getViewportHeight()* .93 so that the PDF does no go past the bottom of the screen. Getting the height of the parent using this.getParent().getHeight() or this.up('panel').getHeight() did not return a render-able value. To work with Orientation Change I just gave the height of the panel it's current width.
showReport: function(list, index, element, record)
var pdfPanel = new Ext.Panel
html:'<iframe src="/mobile/resources/pdfs/'+ record.get("pdf")+'.pdf" height="100%" width="100%" scrolling="auto" frameborder="0"></iframe>'
(a navigation view).push(pdfPanel);