Search code examples
githubmarkdown

GitHub expandable list out of place

e

As you can see from the image, the text for the expandable sections on GitHub is out of place. (Screenshot taken from a random repo's README.md file)

Expected behaviour:

The text should show in the same line as the small arrow.

This is not the case on Gitlab. It seems that this bug affects every markdown file on GitHub.

Code:

<details>
  <summary><h2>👾 I found a bug OR I would like to suggest a new feature</h2></summary>

blabla

</details>

<details>
  <summary><h2>👨‍💻 I want to contribute to this project</h2></summary>

blabla

</details>
Solution

  • You probably won't be able to get this working the way you want. GitHub has significant restrictions in place to limit arbitrary styling.

    I'm not a CSS expert, but it looks like the <div class="markdown-heading"> that's wrapped around the <h2> tags is the culprit. Adding style="display: inline;" using my browser's devtools makes it render the header beside the collapse / expand icon like this:

    Screenshot of GitHub's rendering

    But I don't think you'll be able to set that style programatically, especially since it's added around your heading during rendering.

    This is not the case on Gitlab

    True, but GitLab's approach has another problem (one that's shared with the hacked GitHub version above):

    Screenshot of GitLab's rendering

    The triangle for expanding the section is overlaid with a link icon when you mouse over it, making it hard to actually expand the section. (Clicking the header instead of the triangle does work, but it looks like you should click the triangle.)

    I'd argue that the link icon needs to be handled differently if headings are supposed to go inside <summary> tags.

    My solution would be to move the heading outside of the <details> tag entirely and use something else as your <summary> text:

    ## 👾 I found a bug OR I would like to suggest a new feature

<details>
  <summary>Learn how</summary>

blabla

</details>