1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    6
    Vote Rating
    0
    crojas is on a distinguished road

      0  

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

    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.

    Code:
    showReport: function(list, index, element, record) 
            {
                var pdfPanel = new Ext.Panel
                ({
                    title: record.get('label'),
           
                    layout: 'fit',
                    items:
                    [
                        {
                            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.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    Answers
    3564
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    May 2012
    Posts
    6
    Vote Rating
    0
    crojas is on a distinguished road

      0  

    Default


    Thank you for replying. After testing the iframe on the iPhone and iPad we decided to simply open a new browser window with the pdf. Like you said, we were not able to interact with the pdf in the iframe. If I were to put any other object in this panel, it would display correctly. For some reason though the iframe would have trouble getting a height.

Thread Participants: 1

Tags for this Thread