Problem use cse.google.com

Design help Custom code
1

Hello, I’m installing a search bar of Google CSE.
I have a problem in one, the rendering of CSS.

See the answer google analyst:

Hi,

Greetings from Google for Work Support Team !

As part of license agreement we provide support services only in English language. After translation of your message and looking at your website it seems your issue is related to search button and you are not seeing the search icon as magnifying glass.
If this is the issue, i have verified the issue and able to reproduce it.

After investigation i observed that this is not a GSS product specific issue but some of your own styles defined in your pages are clashing with GSS styles and causing the issue.
I observed that following stylesheet in your website http://www.blogdawineinpack.com.br/ pages is causing this issue
------------------------------------

-----------------------------------

I tired removing this stylesheet in my test environment and observed that search box and search results are rendered properly.

In order to resolve the issue, i would recommend you to use firebug/chrome inspect tools to identify the associated style causing the issue and override in your website as per your requirement.
As part of license agreement, we don’t provide support services for stylesheet related issues.

I would recommend you to create a sample test page with GSS default code only(without using your own stylesheets and javascripts) with supported DOCTYPE and verify the behavior.

If you need further assistance on this case provide me the following details in English language to understand it better:

  1. Problem description with examples
  2. Steps to reproduce the issue
  3. Screenshot illustrating the issue

How to solved this problem?

2

Their https://cse.google.com/cse/style/look/v2/default.css : line 127 is setting width and height for the button.

.cse .gsc-search-button input.gsc-search-button-v2, 
input.gsc-search-button-v2 {
    width: 13px;
    height: 13px;
}

Override this with

<style>
.gsc-search-button input.gsc-search-button.gsc-search-button-v2 {
    width: auto;
    height: auto;
}
</style>

Put in Site Settings > Custom Code > Footer Code

1 Like
3

Hi @samliew tks :)grinning:
you solved my problem :smiley:

4

Thanks I had the same issue!

5

Whats your project? Share here :slight_smile:

6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.