CODEWITHSUNDEEP
cssgoogle-custom-searchzendesk
tvs
tvs

Reputation: 35

CSS issue with styling the Google custom search box

I'm trying to include the Google custom search on our help center. The functionality is ok, however, the styling is quite wrong.

I am pretty sure that some CSS must be overriding/interfering with the Google styles, but I can't seem to find out which ones (tables I guess).

More specifically:

  1. The text entry field is not vertically center-aligned.
  2. The search button is not displayed properly.

This is the link to the sandbox I'm working in, the search bar is in the container below the header: https://acrolinx1429009760.zendesk.com/hc

Side note: I only have access to the one main CSS file from Zendesk.

Any help would be greatly appreciated, thanks.

Upvotes: 2

Views: 9285

Answers (3)

IRSHAD
IRSHAD

Reputation: 2933

Google custom search automatically insert their style sheet. But you can customize it according to your requirement like here I'm removing the extra height which was appearing as an extra space-

<style type="text/css">
   .gsc-control-cse
    {
        height:20px;
        !important;     
    }
    .gsc-control-cse-en
    {
        height:20px;
        !important;
    }
</style>

......

    <div class="customSearch" style="border:0px solid;margin:-15px;width:30%;height:auto;">
    <script>
      (function() {
        .....
      })();
    </script>
    <gcse:search enableAutoComplete="true"></gcse:search>
    </div>

Upvotes: 0

Bram Vanroy
Bram Vanroy

Reputation: 28437

Add box-sizing: content-box; to .cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 for the second issue.

If you want to align center the text in the input field (which I do not recommend!), add text-align center to that element. I don't recommend this because people are used to text in a search box to be left aligned. Rather, I'd make your search bar smaller.

So in total, add this CSS:

.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.gsc-search-box-tools .gsc-search-box .gsc-input {text-align: center;}

Though, as I said, I'd recommend leaving out that last line and making the input smaller. Something like this:

#cse {
    width: 60%; /* make sure you don't use inline width */
    margin: 0 auto;
}
.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

Upvotes: 6

divy3993
divy3993

Reputation: 5810

Try this it must work:

CSS

.cse .gsc-search-button input.gsc-search-button-v2, 
input.gsc-search-button-v2 {
  width: auto; // CHANGED
  height: 28px; // CHANGED
  padding: 6px 27px;
  min-width: 13px;
  margin-top: -1px; // CHANGED
}

.gsc-input-box 
 {
  border: 1px solid #D9D9D9;
  background: #fff;
  height: 28px; // CHANGED
 }

input.gsc-input 
{
  font-size: 19px;
  text-align: center; // ADDED
  padding: 4px 9px;
  border: 1px solid #D9D9D9;
  width: 99%;
}

Upvotes: 0

Related Questions