Search code examples
csspython-sphinxalgolia

How to get Algolia docsearch popup showing on top of Sphinx docs content?

I have a Sphinx docs site and wanted to add Algolia Search support. Everything works great except that the Algolia docsearch popup is showing behind my Sphinx content panel. Very similar problem was reported here: https://github.com/algolia/docsearch/issues/130 but that solution didn't work for me.

I created this codepen sandbox to replicate the issue:

https://codepen.io/adolfo1981/pen/LYbEEme

When you start typing in the search box, the Algolia popup shows behind my content panel on the right. This is the referenced CSS for Algolia docsearch: https://cdn.jsdelivr.net/npm/docsearch.js@2.6.3/dist/cdn/docsearch.min.css

enter image description here

I tried all combinations with these CSS settings as recommended here https://github.com/readthedocs/sphinx_rtd_theme/issues/761 but nothing worked:

.wy-nav-side { overflow: visible;  }
.wy-side-scroll { overflow: auto; }

I also tried changing z-index for multiple CSS classes but no luck.

Hope someone can help me with this. Here is the link to Algolia docsearch dropdown:

https://docsearch.algolia.com/docs/dropdown

UPDATE: Based on @triddle suggestion I modified this class in docsearch.css changing position from relative to fixed seemed to do the trick:

.algolia-autocomplete .ds-dropdown-menu [class^='ds-dataset-'] {
  position: fixed;
  border: solid 1px #d9d9d9;
  background: #fff;
  border-radius: 4px;
  overflow: auto;
  padding: 0 8px 8px;
}
Solution

  • For the css class .ds-dataset-1 add position: fixed;