A fresh mix of code snippets and tutorials

Resize Google Search iframe

I’ve integrated Google Custom Search at DigWP.com and Perishable Press. In doing so, I found it necessary to resize the google-search iframe in order to fit with the responsive layout.

The trick with integrating Google Custom Search is the use of an iframe to load contents. The content of iframes is not available for styling with CSS or modification via JavaScript, but the <iframe> element itself is definitely so.

Set the height of the iframe via jQuery:

$('#cse-search-results iframe').css('height', '1300px');



Set the first div height equal to the second div height:

$('section#div2').css('height', $('section#div1').height()+'px');

For more details, feel free to examine the source code at DigWP.com and Perishable Press. Just look for the Search form and go from there.

★ Pro Tip: