When using large font and a long title for the <display
command in HTML within markdown, the toggle symbol appears above the title. Like this:
I added in the command inline-block
like this
<details>
<summary>
<h6 style="display:inline-block"><span class="font-weight-bold">Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very long title</span></h6>
</summary>
</details>
This helped for shorter titles but not for very long titles displayed on small screens, e.g., my mobile phone.
How can I make the toggle appear next to the title?
2
Answers
The
summary
element has an implicitbutton
role so all the children of this element will have their role removed.This means that the heading won’t be recognized as such by assistive technologies so you should replace that element with some other
inline
element.But in case you want to keep that heading you can safely set
display: contents
on theh6
.Since h6 is a block-level element putting them together might give this issue and you can remove the h6 and directly provide the value to the span