css - <details></details> HTML5 drop-down character not shown in Jupyter HTML nbconverted files in Firefox

Question

This issue has caused me some headaches. For a jupyter lab workshop, we used <details></details> to provide more information on click.

However, when the notebook was converted to HTML via nbconvert, the drop-down arrows would only show in Chrome, not Firefox.

Have a look at this (Firefox):

In Chrome:

Answer 1

This is caused by the following Bootstrap element ..

summary {
  display: block;
}

..which is added to the HTML output.

To fix the issue, the following code must be added to the converted HTML:

<style type="text/css">
/* Fix details summary arrow
   not shown in Firefox
   due to bootstrap
   display: block;
 */
summary {
    display: list-item;
}
</style>

It is possible to create a nbconvert template that adds this automatically.

Create the a file called nbconvert.tpl with the following contents:

{% extends 'full.tpl'%}

{# this template will render cells with tags highlight,
highlight_red and hide_code differently #}

{% block header %}
    {{ super() }}
    <style type="text/css">
    /* Fix details summary arrow
       not shown in Firefox
       due to bootstrap
       display: block;
     */
    summary {
        display: list-item;
        outline: none;
    }
    </style>
{% endblock header%}

{% block input_group %}
    {{ super() }}
{% endblock input_group %}

{% block output_group %}
    {{ super() }}
{% endblock output_group %}

And use it when converting jupyter notebooks to HTML files:

jupyter nbconvert --to html 
    --output-dir=. ./notebook.ipynb 
    --template=./nbconvert.tpl