Strange behavior of Content Area Off Canvas

Hi,

I am using a Content Area Off Canvas to run Google Custom Search. I have pasted the GCS code as directed by google. It works but here are the problems I am running into:

  1. The look of the search box and the search page does not match what is set in Google. It seems some CSS or other settings are distorting the display of the Google Custom Search’s search field and search results. Please see the links I have provided in the secure note.

  2. The scrolling of the results does not work. Instead of scrolling the off canvas, the underlying page scrolls. Again, please see the information in the secure note.

Thanks for your help.

Hi Misha,

Thanks for writing in! Could you please try adding the following CSS rules into your X -> Theme Options -> CSS area and see if that helps.

.gsc-input {
    border-top: none;
}
#gsc-i-id1 {
    box-shadow: none;
    height: 30px !important;
}

Upon testing your other issue, I don’t see any scrolling issue. Could you please provide more information as to what browser you’re using etc. Also provide us with some screenshots or a screen recording by using a similar tool like this (https://www.techsmith.com/jing-tool.html)

Thanks!

@mldarshana Thanks for your reply. Please see my secure note.

Hey Misha,

The search field looks and works fine on my end. There is no issue with it.

Regarding the scroll, it’s only the ads area of the search results that prevents the off canvas scroll. You can try adding the following code in Theme Options > CSS but just note that custom codes are not covered in our product support. In case you’ll encounter issues with it, you will need to enlist help from a third party developer.

.ps__rail-y {
    display: none !important;
}
.x-off-canvas-content {
    overflow-y: scroll !important;
}

Hope that helps and thank you for understanding.

@christian_y thanks!

That worked.

You’re more than welcome, glad we could help.

Cheers!

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