Search bar on Service portal is overlapping with widgets

[zabeeulla2]

Hi All,

We have a requirement where we need to add a search bar (out of Box) on a background image of home page, We were able to add the image and place the search bar as required.

The issue we are facing is when we type some text in search bar the suggestion bar   which it shows below the text is getting overlapped with the widgets present in the container and some text is not visible.Please suggest a way to rectify this. We are using "TypeAhead Search" widget which is an OOB, The same widget when we place it in some other page its working fine.

Please find the screen shots attached.

Immediate help is appreciated.

Regards,

Zabeeulla.

[nathanfirth]

Looks like a z-index issue. Probably your custom styles somewhere. Try something like this in your widget (or theme CSS):

ul.dropdown-menu {

    z-index: 999;

}

You may have to tweak the selector to be more specific to only target the typeahead dropdown.

[zabeeulla2]

Hi Nathan,

I just tried that, but no luck, I still see the same overlap issue.

Regards,

Zabeeulla.

[Rushit Patel2]

as nathan said it looks like z-index issue...try targeting that search drop-down   from browser inspector n put z-index:10000 something..

also try to inspect interfering html elements n see what z-index they have.

[nathanfirth · Accepted solution]

Let's try a different approach. This is not an issue with the out-of-box so it's custom CSS that is interfering... so why don't you try commenting out some of the custom CSS in the: Theme, Page, Instances, Widget, until it eventually starts working again and then just rewrite that CSS.

[zabeeulla2]

Hi Nathan,

Thank you for your valuable input by modifying widget CSS in which OOB search widget was embedded actually worked.

Thanks and Regards,

Zabeeulla.