CODEWITHSUNDEEP
csscordovaiframeheight
Flight643
Flight643

Reputation: 51

Setting iFrame height in Phonegap

I'm working on a Phonegap project that requires the use of an iframe.

The iframe loads fine, however setting a height (either inline by the height attribute or by CSS) is being overwritten in the 'Computed Style' in Safari Developer Inspector. Instead, the height is automatically set to match however tall it's containing content requires it to be (thus never scrolling). The height actively changes as I navigate different links in the iframe.

Is there a known way around this?

Upvotes: 0

Views: 1549

Answers (1)

Jonathan
Jonathan

Reputation: 2983

I did this once using javascript / jQuery. Would this work your you? jsFiddle

HTML

<iframe id="iframeId" marginheight="0" marginwidth="0" align="top" frameborder="0" scrolling="no"></iframe>​

CSS

#iframeId {
  overflow: hidden !important;
 -ms-zoom: 0.4; 
 -moz-transform: scale(0.4); 
 -moz-transform-origin: 0px 0; 
 -o-transform: scale(0.4); 
 -o-transform-origin: 0 0; 
 -webkit-transform: scale(0.4); 
 -webkit-transform-origin: 0 0;
}

jQuery

$('#iframeId').attr('src', "http://webpage.com").width("1105").height("627");

Not sure that's what you're trying to do but in this example, the dimensions of the iFrame are set by jQuery / javascript, and allows the full framed site to be displayed in a smaller container, hence scaled.

Hope this helps. ​

Upvotes: 1

Related Questions