Compatibility with pydata_sphinx_theme

[MalteKurz]

• I would like to use sphinx-tabs in a project with pydata_sphinx_theme (https://github.com/pandas-dev/pydata-sphinx-theme). Unfortunately, they don't seem to be compatible.
• Using the example code together with the option html_theme = 'pydata_sphinx_theme' in the conf.py results in the following behavior.
  
• Do you have any idea how to achieve compatibility? Any help would be very much appreciated.

Versions used: python 3.8.2, pydata_sphinx_theme 0.3.2, sphinx-tabs 1.3.0, sphinx 3.2.1

[welcome]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.

If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).

Welcome to the EBP community! 🎉

[chrisjsewell]

Heya, is this the same in earlier versions, e.g. 1.2?
Maybe something recently broke it because last time I checked it was working with sphinx-book-theme.
Anyway, we should employ here my nice multi-theme set up in https://sphinx-panels.readthedocs.io/en/pydata-theme/

[chrisjsewell]

Also FYI there is now a pydata-sphinx-theme v0.4

[MalteKurz]

Thanks for the quick reply. The multi-theme setup looks very nice.

I locally checked the following combinations:

• With sphinx_tabs 1.3.0 the themes alabaster 0.7.12, sphinx-rtd-theme 0.5.0 & sphinx-book-theme 0.0.36 are fine, but sphinx-pydata-theme 0.4.0 not.
• With sphinx_tabs 1.2.0 I get the same results (theme versions as mentioned above).

[chrisjsewell]

It may be because sphinx tabs uses nodes.container for all of these elements. These are converted in the HTML to

<div class="container"></div>

The Bootstrap CSS framework that pydata-sphinx-theme uses has a special meaning for the container class though, which may be clashing with the CSS from this package.
sphinx-book-theme also uses Bootstrap though, so I'm surprised that works.

Anyway, in sphinx-panels I use a "special" div sub-class of nodes.container, which ensures that the "container" class name is not added to the output div.
It wouldn't hurt to add that here.