Html Question posted in
Some basic documentation can be found here.

Html – <display>-toggle shifted

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:
enter image description here

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?

Tags:

2

Answers


  1. 0

    The summary element has an implicit button 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 the h6.

    summary h6 {
  font: 600 1.5rem/1.25 system-ui;
  display: contents;
}
    <details>
  <summary>
    <h6><span>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>
    Login or Signup to reply.
  2. 0

    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

    .font-weight-bold{
  font-size:1rem;
}
    <details>
  <summary>
   <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>
  </summary>
</details>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search