Threaded View

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


    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.

    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.

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi