Geek Answers Handbook

Problem displaying custom Google search in Foundation 3

I am trying to enable Google Custom Search, but it continues to display incorrectly. The search icon on the button is missing and it looks like the bottom of the text box is disabled.

New member, so I can not post the image.

code

<div id="header"> <div class="row"> <div class="four columns"> <h1><img src="images/QEFLogo.JPG" /></h1> </div> <div class="four offset-by-two columns"> <div id="iso" class="hide-for-small"> <h1> <img src="images/ISO9001.jpg" /> <img src="images/ISO14001.jpg" /> </h1> </div> <div id="gcsearch" class="hide-for-small"> <gcse:searchbox-only></gcse:searchbox-only> </div> </div> </div> </div>

No real CSS to say ...

 #gcsearch { width:300px; position:relative; left:-5px; }

script is not accessible from generated google code.

EDIT Now it turns out that this is a problem. The Google element uses the default.css CSS file on its server. This creates a width and a height.

On line 126 of this CSS sheet, it defines ...

 .cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 { height: 13px; margin-top: 2px; min-width: 13px; padding: 6px 27px; width: 13px; }

Bearing in mind that I have little Javascript knowledge, why is this happening and how can I fix it?

I tested the code on a non-Foundation page and it will display correctly.

+4
source share
3 answers

This was a problem with the Foundation base. The following is added and the button is pressed. The named classes are generated by Google, so they do not appear in my code above.

 input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { background-image: inherit; box-sizing: content-box; }
+4
source

I now had the same problem. With version 2 of google classes I added the following css

 <style> .cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 { background-image: inherit; box-sizing: content-box; -moz-box-sizing: content-box; } </style>

now works in Chrome and Firefox

+1
source

There are too many tags in your code </div> . This makes it invalid HTML and probably why it does not display correctly.

0
source

More articles:


All Articles