🐛 Bug Report
Wrong z-axis order for overlaying controls (e.g. fluent-select) inside fluent-accordion.
💻 Repro or Code Sample
<fluent-accordion>
<fluent-accordion-item expanded>
<label slot="heading">Encryption</label>
<!-- ... -->
<div class="flex-column">
<label id="cipher">Cipher</label>
<fluent-select aria-labelledby="encryption">
<fluent-option value="0">None</fluent-option>
<fluent-option value="1" disabled>AES-128-GCM</fluent-option>
<fluent-option value="2" disabled>AES-256-GCM</fluent-option>
<fluent-option value="3" disabled>ChaCha20-Poly1305</fluent-option>
</fluent-select>
</div>
<!-- ... -->
</fluent-accordion-item>
<fluent-accordion-item>
<label slot="heading">Security</label>
<!-- ... -->
</fluent-accordion-item>
</fluent-accordion>🤔 Expected Behavior
ListBox of Select should be over the accordion heading stuffs.
😯 Current Behavior
💁 Possible Solution
Currently, Accordion heading has a z-index of 2 while that of ListBox of Select is 1, so this may be fixed by just modifying CSS.
🔦 Context
Building a form dialog with classified options with Blazor.
🌍 Your Environment
- OS & Device: Windows 11
- Browser Microsoft Edge 95.0.1020.30, Mozilla Firefox 93.0
- Version 2.0.0
🐛 Bug Report
Wrong z-axis order for overlaying controls (e.g.
fluent-select) insidefluent-accordion.💻 Repro or Code Sample
🤔 Expected Behavior
ListBox of Select should be over the accordion heading stuffs.
😯 Current Behavior
💁 Possible Solution
Currently, Accordion heading has a
z-indexof2while that of ListBox of Select is1, so this may be fixed by just modifying CSS.🔦 Context
Building a form dialog with classified options with Blazor.
🌍 Your Environment