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

Tried your code in jsfiddle. Working fine I guess. http://jsfiddle.net/Bq4Pz/ — Java_User, Feb 21 '14 at 11:16
Duplicate of http://stackoverflow.com/questions/15954381/remove-conflicting-styling-boostrap-google-custom-search — mainguy, Feb 21 '14 at 11:40
It seems the problem is not duplicate or I could not solve my problem with the provided solution. Updated the JSFiddle to simulate the problem. — user2094440, Mar 29 '14 at 15:08
I had a similar problem. The way I solved it was by using Firebug in firefox. I inspected the google custom search engine input field and disabled css rules from my custom css files that looked suspicious one by one until I hit on one that fixed it. In my particular case there was a margin on all `table` elements. Removing that fixed the issue. Firebug (or a similar tool) will save you I think. — User, Apr 04 '14 at 01:49

score 25 · Answer 1 · edited Oct 01 '14 at 23:39

25

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/

edited Oct 01 '14 at 23:39

Sébastien

11,860
11
58
78

answered Oct 01 '14 at 23:34

Anil Gupta

498
6
9

The accepted answer did not fix styling on the input box with google CSE and Bootstrap 3. This answer does. – MTAdmin Jan 30 '15 at 16:42

rafapoza · Accepted Answer · 2014-06-04T10:19:58.227

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

score 1 · Answer 3 · answered Aug 20 '14 at 14:29

1

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.

answered Aug 20 '14 at 14:29

Stuart

11
1

score 1 · Answer 4 · answered Sep 16 '16 at 14:37

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

score 0 · Answer 5 · answered Dec 19 '14 at 10:14

0

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

answered Dec 19 '14 at 10:14

komm

71
6

score 0 · Answer 6 · answered Jul 22 '17 at 21:12

0

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

answered Jul 22 '17 at 21:12

Maneet

61
1
9

First CSS Block fixes the offset of type-box; second one fixes the search button. Source for Second CSS Block: https://stackoverflow.com/a/36799768/8067338 – Maneet Jul 22 '17 at 21:14

Google CSE with Twitter Bootstrap not displaying the search box correctly

6 Answers6