Results 1 to 3 of 3

Thread: Height of panel with an html iframe is set to 100% but renders with a height of 0

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    May 2012
    Vote Rating

    Default Answered: Height of panel with an html iframe is set to 100% but renders with a height of 0

    Hello everyone,

    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.

    please help.

    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
                    title: record.get('label'),
                    layout: 'fit',
                            width: '100%',
                            height: '100%',
                            styleHtmlContent: false,
                            scrollabe: false,
                            html:'<iframe src="/mobile/resources/pdfs/'+ record.get("pdf")+'.pdf" height="100%" width="100%" scrolling="auto" frameborder="0"></iframe>'
                (a navigation view).push(pdfPanel);

  2. I would recommend against using an iframe, interactions within the iframe will not work.

    Does the parent Panel have a size? Inspect the DOM to see what component doesn't have a height.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts