Here's an update following the discussion in this thread. I've implemented the solution suggested there into my Vue component, modified the collapse section, and turned it into a nested collapse with multiple collapse elements nested inside.
The current issue I'm facing is that when I apply !overflow-visible to the main collapse element to override its behavior, the child elements within it start overflowing even when the collapse is closed.
How can I address this issue? I attempted to add overflow-hidden to the child components of the collapse, but due to inheritance, the overflow-hidden rule doesn't have any effect. Additionally, despite setting a z-index value of 99 to the collapse containing the dropdown, it fails to display above other elements as expected.
<template>
<div
v-for="index in 3"
tabindex="0"
class="collapse !overflow-visible collapse-plus z-0 rounded-lg border border-base-content bg-base-100 shadow-md md:w-[48.75%]"
:class="collapse ? 'collapse-open' : 'collapse-close'"
>
<div
class="collapse-title !overflow-hidden flex items-center text-lg font-medium"
:class="collapse ? 'bg-primary' : 'bg-base-100'"
@click="OnClick"
>
<div
class="mr-3 grid h-[58px] !overflow-hidden w-[62px] place-content-center rounded-lg"
:class="collapse ? 'bg-base-100' : 'bg-primary'"
></div>
<div
class="flex flex-col gap-1"
:class="collapse ? 'text-base-100' : 'text-primary'"
>
Test
<div class="badge badge-success rounded-[4px]">Active</div>
</div>
</div>
<div class="collapse-content bg-base-200 !p-0 text-accent">
<div
tabindex="0"
class="collapse collapse-open border border-base-300 bg-red-200 !overflow-visible"
>
<div class="collapse-title text-xl font-medium">
I have collapse-open class
</div>
<div class="collapse-content !overflow-visible">
<h2>HELLLERGLERL</h2>
<h2>HELLLERGLERL</h2>
<h2>HELLLERGLERL</h2>
<h2>HELLLERGLERL</h2>
<h2>HELLLERGLERL</h2>
<h2>HELLLERGLERL</h2>
<details class="dropdown dropdown-end z-[99]">
<summary class="m-1 btn">open or close</summary>
<ul
class="p-2 shadow menu dropdown-content z-[98] bg-base-100 rounded-box w-52"
>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
<div
tabindex="0"
class="collapse collapse-open border border-base-300 bg-blue-200 !overflow-visible"
>
<div class="collapse-title text-xl font-medium">
I have collapse-open class
</div>
<div class="collapse-content">
<details class="dropdown">
<summary class="m-1 btn">open or close</summary>
<ul
class="p-2 shadow menu dropdown-content z-[99] bg-base-100 rounded-box w-52"
>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</details>
</div>
</div>
</details>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const collapse = ref(false);
function OnClick() {
collapse.value = !collapse.value;
}
</script>