Markdown - problem with <details> section #626

New Issue

OVERLORD · 2026-02-04T21:31:08+03:00

OVERLORD commented

2026-02-04 21:31:08 +03:00

Originally created by @scrhicks on GitHub (Apr 2, 2018).

For Bug Reports

BookStack Version 0.20.3
PHP Version: 7.1
MySQL Version: I'm' using MariaDB (10.3.5)
Browsers: Chrome: 65.0.3325.181 (64-bit) / Firefox: 59.0.2 (64-bit)
Operation System: Windows 10 - for browsers, testing and displaying
Ubuntu 16.04.4 with Docker 18.03-ce for docker-compose.

Here is my docker-compose file which I'm using: 886bc7d050/bookstack/bookstack.yml

Expected Behavior

When I'm using code block in the <details> section it should properly display and format text.

Current Behavior

It seems something is wrong with CSS styles when I'm using <details> block with the code section. When I uncollapse section then is see only empty block code

https://www.screencast.com/t/5XmajwY662j

and when I click on it then the content appears but it is broken because the number of lines is moved to the right.

https://www.screencast.com/t/pDf1ySG0wiv

Steps to Reproduce

First set Page editor to Markdown
https://www.screencast.com/t/I4Fx1sfXa7GD

Next, create book and page and paste a code

<details>
<summary>1. Pull httpd image. </summary>

```
docker pull httpd
```
</details>

In the preview window, everything looks fine. But when you save it then this bug occurs.

This is not a very critical bug but it will be great if it will be work :D.

Best regards
Przemek

Originally created by @scrhicks on GitHub (Apr 2, 2018). ### For Bug Reports * BookStack Version 0.20.3 * PHP Version: 7.1 * MySQL Version: I'm' using MariaDB (10.3.5) * Browsers: Chrome: 65.0.3325.181 (64-bit) / Firefox: 59.0.2 (64-bit) * Operation System: Windows 10 - for browsers, testing and displaying * Ubuntu 16.04.4 with Docker 18.03-ce for docker-compose. Here is my docker-compose file which I'm using: https://bitbucket.org/pogosoftware-vagrant/bookstack/src/886bc7d050e89f49559848911205ea6f8a8bfe28/bookstack/bookstack.yml?at=master&fileviewer=file-view-default ##### Expected Behavior When I'm using code block in the <details> section it should properly display and format text. ##### Current Behavior It seems something is wrong with CSS styles when I'm using <details> block with the code section. When I uncollapse section then is see only empty block code https://www.screencast.com/t/5XmajwY662j and when I click on it then the content appears but it is broken because the number of lines is moved to the right. https://www.screencast.com/t/pDf1ySG0wiv ##### Steps to Reproduce First set Page editor to Markdown https://www.screencast.com/t/I4Fx1sfXa7GD Next, create book and page and paste a code <details> <summary>1. Pull httpd image. </summary> ``` docker pull httpd ``` </details> In the preview window, everything looks fine. But when you save it then this bug occurs. This is not a very critical bug but it will be great if it will be work :D. Best regards Przemek

OVERLORD added the 🐛 Bug 🎨 Design labels 2026-02-04 21:31:08 +03:00

OVERLORD closed this issue

2026-02-04 21:31:10 +03:00

OVERLORD commented

2026-02-04 21:31:12 +03:00

@ssddanbrown commented on GitHub (Apr 21, 2018):

Hi @pogosoftware,
Thanks for reporting this. Can confirm the issue in my own testing.

Seems to be an issue with how CodeMirror renders when technically hidden within the details block. I noticed that if you open the sections then resize the window then the code will show although not without issues.

Will need to detect toggling of detail blocks and re-render code blocks within.

@ssddanbrown commented on GitHub (Apr 21, 2018): Hi @pogosoftware, Thanks for reporting this. Can confirm the issue in my own testing. Seems to be an issue with how CodeMirror renders when technically hidden within the details block. I noticed that if you open the sections then resize the window then the code will show although not without issues. Will need to detect toggling of detail blocks and re-render code blocks within.

OVERLORD commented

2026-02-04 21:31:20 +03:00

@ssddanbrown commented on GitHub (Jan 30, 2021):

Update made in 5404f22bf9 to refresh codemirror blocks on details toggle.
Will be part of the next feature release.

@ssddanbrown commented on GitHub (Jan 30, 2021): Update made in 5404f22bf967a6d597bffbbc7a683e64f9525a03 to refresh codemirror blocks on details toggle. Will be part of the next feature release.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#626