If you use the Google custom search on your website like us, along with the latest version (currently 3.3.7) Twitter Bootstrap CSS, you most probably would have seen the conflicting CSS rules.
This Google search Input box conflicting Bootstrap (works for 3.* and 4.* ) CSS creates 2 issues:
- Google Custom Search Input Box and Search ButtonThe input box’s text pops out of the text box and the Google search button squeezes. When the user types the text, it looks awkward as there is no input box boundary visible.On the other side, the search icon on the search button is missing. It just simply shows blue color button which appears squeezed to lesser height than required.
- Google custom search results tabsIf you have selected to show the web search results as well as the image search from your web site, Google custom search creates two tabs.
These 2 tabs show scroll bars in their tab headers instead of showing the text ‘Web’ and ‘Image’.The problem is the conflict created by Google search custom CSS that can’t be modified.
I tried searching a lot on the Google and found some help here on the stack-overflow discussion for the first issue. But, the second one was still a mystery.
Here is what I have tried to fix the issue and you can see it working now on this website.
Remove conflicting Bootstrap CSS styling with Google Custom Search
As you know that Google custom search downloads its own styles, they conflict with the Bootstrap ones.
So, the idea is to override the Custom Search’s CSS by adding these styles in your theme’s style.css. The code in red is important.
- To fix the Google Search Input Box and Button CSS conflict:
/*AM22 - To make google search box appear correct - START*/
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus, .gsc-search-button
{
box-sizing: content-box;
line-height: normal;
}
/*AM22 - To make google search box appear correct - END*/
- To remove the scroll bars from Google Search results tabs:
/*AM22 - To make google search results tabs appear correct - START*/
.gsc-tabsArea div
{
/*By default, Google custom search CSS sets it as AUTO, which shows scroll bars*/
overflow: visible;
}
/*AM22 - To make google search results tabs appear correct - END*/
Where to add this CSS code?
You do not need to change Bootstrap CSS in this case.
If you are using WordPress, just add it in the header.php.
It is possible that you are using a theme which internally uses bootstrap CSS. In this case, you would have to add the above CSS rules in your theme’s specific style.css.
Note that the idea is to simply override the CSS rules specific to Google’s CSS. Google’s CSS is added dynamically to your web page and hence it can’t be modified.
If you are just using the Bootstrap’s CDN link to load it for your website, you should add the above code to all web pages’s head inside the
<style> ABOVE MENTIONED CSS RULES </style> tag.
feztheforeigner 15 Jan, 15 at 4:24 pm
This helped tremendously, thank you so much for sharing!
I do still have one issue, however, I am having trouble with the search box skipping a line. It is nested in my (bootstrap) header but causes a lot of awkwardness from skipping a line (see screenshot.)
Do you have any suggestions on how to fix this? I tried nowrap an but neither seemed to work…
Anil Gupta 15 Jan, 15 at 4:31 pm
Not sure why it is breaking into next line, but you can probably try the sample code for search form given here:
http://getbootstrap.com/components/#navbar
I am sure you would have already tried the link shared by me, but I do not have more information to add at this point.
Ken Haskins 21 Dec, 14 at 12:57 pm
Just wanted to say thanks for this tutorial. My head was about to explode. You don’t know how many times I combed over my CSS thinking that something was wrong. Never knew that Bootstrap was the conflicting issue. Working fine now. Thanks again!
Anil Gupta 21 Dec, 14 at 1:33 pm
I am glad it helped you. You are welcome.