Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<details> <summary> tag not working #147

Open
withrvr opened this issue Jan 10, 2022 · 4 comments · May be fixed by #149
Open

<details> <summary> tag not working #147

withrvr opened this issue Jan 10, 2022 · 4 comments · May be fixed by #149

Comments

@withrvr
Copy link

withrvr commented Jan 10, 2022

Example code

<details>
  <summary>⚡ GitHub Stats</summary>

1. something
2. foo
3. bar

</details>

OR

<details>
  <summary>⚡ GitHub Stats</summary>
  <br />

![GitHub Streak Stats](http://github-readme-streak-stats.herokuapp.com?user=withrvr&date_format=j%20M%5B%20Y%5D)

![withrvr GitHub Stats](https://github-readme-stats.vercel.app/api?username=withrvr&show_icons=true)

![withrvr GitHub Most Used Language Stats](https://github-readme-stats.vercel.app/api/top-langs/?username=withrvr&langs_count=10&layout=compact)

</details>

Images

image

image

@YDX-2147483647
Copy link

YDX-2147483647 commented Jan 27, 2022

I meet the same issue today.

Add this in your style.scss, and the small triangle will be back.

details > summary:first-of-type {
    display: list-item;
}

(If you don't have a style.scss yet, please follow the guide in Read Me.)

Besides, if you want to use markdown inside a HTML tag, markdown='1' is necessary.

<details markdown='1'>
  <summary>⚡ GitHub Stats</summary>

1. something
2. foo
3. bar

</details>

Futher information: kramdown syntax. (Search “By default, kramdown parses all block HTML tags and all XML tags as raw HTML blocks.” if the browser doesn't jump there.)

@YDX-2147483647
Copy link

YDX-2147483647 commented Jan 27, 2022

I think update normalize.scss would fix it forever and for all.

Revert "Upgrade normalise.css from v3.0.2 to v8.0.0.", was it an error?.

YDX-2147483647 added a commit to YDX-2147483647/cayman that referenced this issue Jan 27, 2022
Upgrade normalize.css (v3.0.2 → v8.0.1).
@YDX-2147483647 YDX-2147483647 linked a pull request Jan 27, 2022 that will close this issue
@d-donne
Copy link

d-donne commented Feb 18, 2022

The Details Tag

Used to create content that can collapse or expand upon the user clicking on it.

Syntax

<details>
	<summary> General Info about Content </summary>
	
	 Your Content
	 Your Content

</details>


The summary tag is nested in the details tag and it has the content that will show when collapsed.

@YDX-2147483647
Copy link

Thanks for explaining the syntax, but it's not the key. The default triangle widget which indicates “you can click me to expand” is overwritten by mistake in normalise.css v3.0.2:

summary {
display: block;
}

(The widget is a kind of list-style, so it appears when display: list-item but not when display: block;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants