How can I set a custom width on my Google search iframe?

I am trying to use google search for my site:

http://www.houseofhawkins.com/search.php

It is not playing nice with some screen resolutions. Here is the code given from google:

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 250;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

I changed the "googleSearchFrameWidth" down to 250 thinking that should be setting the width in px, (it was 600 to start with). But with smaller screens (1024 * 768) it sticks out the side of my divs.

Am I doing something stupid?

Solution

Ran into the same trouble you did wanting to resize the iFrame. You'd think changing the googleSearchFrameWidth value would do the trick, but nope.

So I resorted to DOM manipulation. Since the name of the iFrame is "googleSearchFrame", Right after the

<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

reference, I added another <script> tag with the following:

<script type="text/javascript">
  document.getElementsByName('googleSearchFrame').item(0).width = 600;
</script>

The above sets the width of the iFrame at 600px. In your case, obviously, you'd want to set it to 250. If you're paranoid that Google might change the iFrame name some day, just go with the getElementsByTagName('iFrame') method and narrow it down to the position of your iFrame in the document (if you have multiple iFrames).