Merge pull request #15 from executablebooks/fixing-padding

🐛 BUG: Fixing overlapping title on hidden admonitions
executablebooks · Aug 7, 2020 · 24935d1 · 24935d1
2 parents b1dde11 + e376ef4
commit 24935d1
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/docs/index.rst b/docs/index.rst
@@ -204,3 +204,16 @@ Here's how they look right after one another:
 .. toggle::
 
     This is my second.
+
+.. admonition:: A really long admonition that will take up multiple lines A really long admonition that will take up multiple lines
+    :class: toggle
+
+    Admonition content.
+
+    .. image:: https://jupyterbook.org/_static/logo.png
+
+.. admonition:: A really long admonition that will take up multiple lines A really long admonition that will take up multiple lines
+
+    Admonition content.
+
+    .. image:: https://jupyterbook.org/_static/logo.png
diff --git a/sphinx_togglebutton/_static/togglebutton.css_t b/sphinx_togglebutton/_static/togglebutton.css_t
@@ -12,11 +12,17 @@
 }
 
 /* Overrides for admonition toggles */
-div.admonition.toggle-hidden {
-    height: 3em;
+
+/* Titles should cut off earlier to avoid overlapping w/ button */
+div.admonition.toggle p.admonition-title {
+    padding-right: 20%;
 }
 
+/* hides all the content of a page until de-toggled */
 div.admonition.toggle-hidden .admonition-title ~ * {
+    height: 0;
+    margin: 0;
+    float: left; /* so they overlap when hidden */
     opacity: 0;
     visibility: hidden;
 }