Question

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.

Answer 1

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;
}