Skip to content

Fix details inside drop-down being rendered as dropdown - #4

Merged
Yohn merged 1 commit into
Yohn:mainfrom
mwargan:patch-1
Nov 10, 2024
Merged

Fix details inside drop-down being rendered as dropdown#4
Yohn merged 1 commit into
Yohn:mainfrom
mwargan:patch-1

Conversation

@Yohn

@Yohn Yohn commented Nov 10, 2024

Copy link
Copy Markdown
Owner

Given a dropdown that contains an accordion within it, the accordion renders as a dropdown because the summary selector also selects the children of a dropdown element. This fixes that so it renders as expected.

<details class="dropdown">
   <summary> Select a phase of matter... </summary>
   <ul>
      <li>
         <details>
            <summary> This is a dropdown option </summary>
            <ul>
               <li><label><input type="radio" name="phase" value="gas"> Gas </label></li>
               <li><label><input type="radio" name="phase" value="plasma"> Plasma </label></li>
            </ul>
         </details>
      </li>
   </ul>
</details>

Given a dropdown that contains an accordion within it, the accordion renders as a dropdown because the summary selector also selects the children of a dropdown element. This fixes that so it renders as expected.

```
<details class="dropdown">
   <summary> Select a phase of matter... </summary>
   <ul>
      <li>
         <details>
            <summary> This is a dropdown option </summary>
            <ul>
               <li><label><input type="radio" name="phase" value="gas"> Gas </label></li>
               <li><label><input type="radio" name="phase" value="plasma"> Plasma </label></li>
            </ul>
         </details>
      </li>
   </ul>
</details>
```
@Yohn
Yohn merged commit e1348d0 into Yohn:main Nov 10, 2024
@mwargan
mwargan deleted the patch-1 branch March 9, 2025 22:16
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 this pull request may close these issues.

2 participants