CODEWITHSUNDEEP
htmlcssresponsive-designzurb-foundationgoogle-custom-search
Silvermodak
Silvermodak

Reputation: 91

Google Custom Search display issue in Foundation 3

I am trying to include a Google custom Search but it keeps displaying incorrectly. The search icon on the button is missing and it looks as if the bottom of the textbox is cut off.

New member so I can't post an 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 speak of...

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

The script is untouched from the generated code by Google.

EDIT Now found that this is the problem. The Google element uses the CSS file default.css on their server. This generates width and height.

On line 126 of that 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 I do not have much Javascript knowledge at all, why is this happening and how can I fix it?

I tested the code on a non Foundation page and it renders correctly.

Upvotes: 4

Views: 2300

Answers (3)

Taifun
Taifun

Reputation: 6293

I now had the same issue. With version 2 of the 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>

works now in Chrome and Firefox

Upvotes: 1

Silvermodak
Silvermodak

Reputation: 91

It was an issue with Foundation framework. Added the following to the button and resolved. The classes referred to are generated by Google which is why they do not show on my code above.

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

Upvotes: 4

Fred
Fred

Reputation: 4954

There is one too many </div> closing tag in your code. That makes it invalid HTML and is probably why it displays wrong.

Upvotes: 0

Related Questions