Google custom search not appearing...

User 2189375 Photo


Registered User
27 posts

Hi,
I've found that in my trial responsive site the embedded google custom search is isn't displaying correctly:
http://www.practicalcontrol.com.au/resptest/
The search field is small and pushed over to the bottom left.

It looks fine on my non responsive site:
http://www.practicalcontrol.com.au
so I assume the CSS generated by RSD is changing the appearance.

Any ideas for a work-around?

Simon
User 103173 Photo


VP of Software Development
0 posts

Can you upload your .RSD project file so I can look over the settings?
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2189375 Photo


Registered User
27 posts

Hi Scott,
For some reason the forum won't allow me to upload the ,rsd file so I'll provide this link:
https://www.dropbox.com/s/gku9qxwqmmeqn … 8.rsd?dl=0
The script is inserted as an html element between <div> tags and covers 12 spans with no changes on breakpoints.
User 103173 Photo


VP of Software Development
0 posts

I do see an issue there with your code, so I went to the Google CSE page and created one for an internal site of mine and the markup they gave me worked perfectly. It could be the code you have has been modified recently. Try getting a new set of markup from Google and see if that works.

If it does not, let us know and we can try something else.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2189375 Photo


Registered User
27 posts

Hi Scott,
I generated some new google script, both mobile and desktop versions, and dropped it in a new blank rsd project. The results were the same, neither display correctly.
https://www.dropbox.com/s/goei7eyhtbhg9 … t.rsd?dl=0

The same script displays correctly if I drop it in a new blank html page generated in HTML Editor.

Any ideas?
User 103173 Photo


VP of Software Development
0 posts

I am looking into this right now. I think it has to do with certain themes you can select from for your search box. I have tried a few and they work for me here but not the one you have selected. Not sure what is going on there, but I am sure we can figure it out. ;)

What I did notice is it does work for themes that have the word "search" for the button but not ones that just have a magnifying glass. Something in our CSS might be overriding some styles there.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2189375 Photo


Registered User
27 posts

I changed the theme to one with "search" button rather than magnifying glass. It does display better.
The input field doesn't stretch out to full width so there is quite a big gap between it and the search button if you give it the full grid width. For now I'll restrict it to a few columns.
Attachments:
User 103173 Photo


VP of Software Development
0 posts

Ok, got it figured out. Some of the styles in our CoffeeGrinder framework were overriding the Google ones. If you add this code just before your search box code, it will fix it.


<style>
.gsc-control-cse * {
margin: 0;
padding: 0;
max-width: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
</style>

Attachments:
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2189375 Photo


Registered User
27 posts

Thanks for your help Scott, that seems to have fixed it:)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.