Google CSE with Twitter Bootstrap not displaying the search box correctly

Question

The Google Custom Search (CSE) not displaying the search box and the button correctly. I am using Twitter Bootstrap v3.1.0.

<script>
    (function() {
        var cx = '009077552906670546181:2ufng0dmsos';
        var gcse = document.createElement('script');
        gcse.type = 'text/javascript';
        gcse.async = true;
        gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
            '//www.google.com/cse/cse.js?cx=' + cx;
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(gcse, s);
    })();
</script>
<gcse:search></gcse:search>

Can anyone please help?

http://jsfiddle.net/nz6rh/

screenshot of the abnormal searchbox

Answer 1

I have used the following CSS to resolve the Bootstrap conflict:

input.gsc-input,
.gsc-input-box,
.gsc-input-box-hover,
.gsc-input-box-focus,
.gsc-search-button {
    box-sizing: content-box; 
    line-height: normal;
}

You can check the working example here (I use Bootstrap 3.2 currently): http://www.am22tech.com/google-custom-search-input-box-conflicting-bootstrap-css/

Answer 2

I've got the same problem. It is not the best solution, but until this solution comes... it could help you. Try adding this to your CSS file with your own colours and measures:

.gsc-search-button
{
    background-color: #1a4195;
    border-radius: 5px;

}

input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
    background-color: #1a4195 !important;
    background-image: url("http://www.google.com/uds/css/v2/search_box_icon.png") !important;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    height: 16px !important;
    border-color: #1a4195 !important;
    filter: none;
}

Answer 3

Per getbootstrap.com:

Some third party software, including Google Maps and Google Custom Search Engine, conflict >with Bootstrap due to * { box-sizing: border-box; }

Check the Third party support section for some work-arounds.

Answer 4

From https://productforums.google.com/forum/#!topic/adsense/bUtHfTZ_HYM , I got:

.gsc-control-cse .gsc-table-result {
    font-family : inherit;
}

.gsc-control-cse .gsc-input-box {
    height : inherit;
}

input.gsc-input,
.gsc-input-box,
.gsc-input-box-hover,
.gsc-input-box-focus,
.gsc-search-button, input.gsc-search-button-v2 {
    box-sizing  : content-box;
    line-height : normal;
    margin-top  : 0px;
}

Answer 5

The solution is this:

-Add this code on the .css of your site:

.gsc-results-wrapper-overlay, .gsc-results-wrapper-visible, .gsc-search-button, .gsc-search-button-v2 {
        box-sizing: content-box;
    }

Answer 6

The following worked for me:

CSS:

#gsc-i-id1 {
    position: relative;
    left: -7px;
    top: -4px;
}

input.gsc-search-button-v2 {
    height: 26px !important;
    margin-top: 0 !important;
    min-width: 13px !important;
    padding: 5px 26px !important;
    width: 68px !important;
}