twbs/bootstrap

Expand arrow gone from summary element

Closed this issue · 5 comments

vanillajonathan commented

The visual expand arrow visible in Chrome and Firefox on the details element disappears with normalize.

I don't know if this is intentional or not.

<details>
  <summary>Click on this summary to expand</summary>
  <p>Here is additional text, visible when expanded...</p>
</details>

Bootstrap 3.3.7
https://jsfiddle.net/vu6o29es/

Cross-reference: necolas/normalize.css#640

patrickhlauke commented

I can't reproduce in Chrome 54/Windows 10, but do see the problem in Firefox 49. This seems to be a browser bug, rather than anything intentional.

thierryk commented

The problem is not with details but with summary. This is because the browser styles summary using:

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

so this rule

article, 
aside, 
details, 
figcaption, 
figure, 
footer, 
header, 
hgroup, 
main, 
menu, 
nav, 
section, 
summary { 
  display: block;
}

overwrites the style for summary.

  • 👍2
thierryk commented

As a side note, I think the title of this issue should be changed to:

Expand arrow gone from summary element

thierryk commented

I forgot to mention that display: list-item is the correct normalization for this element, see
https://github.com/necolas/normalize.css/blob/master/normalize.css#L430

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}
  • 👍1
vanillajonathan commented

Seems according to @awayken a solution would be to update to Normalize 5.0.