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

Question

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?

Answer 1

I have three settings that you can tweak, a combination of which I hope will get you where you need to go:

1. googleSearchFrameWidth - Set this in the JavaScript to your desired width. This is the most obvious one and the one you've probably already tweaked.
2. Width of cse-search-results div - Use an inline style statement (e.g. style ="width:500") to set the width of the div.
3. Set the IFrame Style - If you check, you'll probably notice that all of this content is being rendered from Google via an IFrame. This is a bit harder to tweak but doable. To do this, add a statement to the end of your stylesheet such as #cse-search-results iframe { }, including the actual iframe style within the brackets.

I hope one of these or a combination of these proves to be the answer for you. When in doubt, use a DOM inspector such as the one available in Firebug to analyze the impact of your changes on the DOM. Hope this helps.