sphinx_tabs.tabs are not rendered properly

[dizcza]

The bootstrap theme does not render sphinx_tabs.tabs properly.

Sphinx-tabs project: https://github.com/djungelorm/sphinx-tabs

.. tabs::


    .. tab:: (recommended) Conda (Linux/MacOS/Windows)

        1. Create your conda environment (e.g., `elephant_env`):

           .. code-block:: sh

              conda create --name elephant_env python=3.7 numpy scipy tqdm

        2. Activate your environment:

           .. code-block:: sh

              conda activate elephant_env


    .. tab:: Debian/Ubuntu

        Open a terminal and run:

        .. code-block:: sh

           sudo apt-get install python-pip python-numpy python-scipy python-pip python-six python-tqdm

Results in

Expected

I don't experience this problem with other themes like alabaster (default) or sphinx-rtd.

[ryan-roemer]

Looking at sphinx-tabs it does a lot of direct JS manipulation in many of the same areas that sphinx-bootstrap-theme does whereas I'm guessing those other things are mostly just server-rendered without heavy JS stuff.

Would welcome a PR that can accommodate / harmonize both worlds!

[svenevs]

Under the hood they're using semantic-ui. Can semantic-ui and bootstrap mix well?

https://github.com/djungelorm/sphinx-tabs/blob/782104f19a401aa68d5a26f9085f5bb0131c2f3b/sphinx_tabs/tabs.py#L74

If you're wanting to hack things, might be worth trying to modify the classes they are attaching to each of these things (see other locations of classes in that file as well). The tabs.js file may come into play, but that's not my cup of tea :/

In your conf.py to test things you can do

html_static_path = ["_static"]
# called automagically for you by sphinx as long as in conf.py
def setup(app):
    # relative to html_static_path!  so file is _static/hack.js
    app.add_js_file("hack.js")

If you're better at javascript, maybe you see a clever way to transform the classes you need from semantic-ui classes to bootstrap classes? (I know almost zero js ... just trying to point you in a direction that will let you tinker if you want to!)

Hope that helps some! But unless bootstrap and semantic-ui are supposed to be able to play well with each other, I don't think this is an issue with this theme. You may need to choose one or the other 🙁

[dizcza]

Yeah, unfortunately, I don't know JS.

[svenevs]

😱 It's voodoo to me too. FWIW, if you want to keep using the bootstrap theme and you don't have a large number of these tab things you want to do, you can get by using .. raw:: html (assuming you don't care about, e.g., producing a PDF, which you can't with sphinx_tabs either). This was mostly successful:

.. raw:: html

    <ul class="nav nav-tabs" role="tablist">
      <li class="active">
        <a href="#tab-conda" role="tab" data-toggle="tab">(recommended) Conda (Linux/MacOS/Windows)</a>
      </li>
      <li>
        <a href="#tab-debian" role="tab" data-toggle="tab">Debian/Ubuntu</a>
      </li>
    </ul>

.. raw:: html

    <div class="tab-content panel panel-default">
      <div class="tab-pane active panel-body" id="tab-conda">

1. Create your conda environment (e.g., `elephant_env`):

   .. code-block:: sh

       conda create --name elephant_env python=3.7 numpy scipy tqdm

2. Activate your environment:

   .. code-block:: sh

       conda activate elephant_env

.. raw:: html

    </div><!-- /tab-conda -->
      <div class="tab-pane panel-body" id="tab-debian">

Open a terminal and run:

.. code-block:: sh

    sudo apt-get install python-pip python-numpy python-scipy python-pip python-six python-tqdm

.. raw:: html

      </div><!-- /tab-debian -->
    </div><!-- /tab-content -->

Mostly just copy-pasta from this SO answer, but I added panel panel-default to the tab-content one and panel-body to the inner tab-pane divs.

It may be worth asking the author of sphinx_tabs if they are interested in supporting bootstrap since they know their extension best. It's nice because it handles the tedious parts of e.g., auto-generating id attributes and whatnot for you. But it's unclear to me how much effort it would take to support that. At the very least, the bootstrap classes need to be emitted rather than the semantic-ui ones. But beyond that, I don't know what else would need to change (both for that extension, as well as this theme).