TailwindCSS custom dropdown expanding parent

Question

I'm building a custom dropdown with TailwindCSS

<div class="container mx-auto">
                <div class="px-4 mt-3 lg:mt-0">
                    <div class="bg-white overflow-hidden shadow-xl rounded-lg mx-auto">
                        <div class="py-4 w-full border-r border-gray-300">
                            <h2 class="text-gray-900 text-xl mb-3 px-4">All Courses</h2>
                            <div class="relative mt-1 px-4 grid grid-cols-12">
                                <div class="col-span-12 lg:col-span-10">
                                    <input class="shadow appearance-none border rounded-none border-gray-300 rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline lg:rounded-r-none" type="search" placeholder="Search a course...">
                                </div>
                                <div class="col-span-12 lg:col-span-2">
                                    <!-- To be separated on his own component later -->
                                    <button @click="openfilterDropdown = !openfilterDropdown" class="lg:rounded-l-none mt-2 lg:mt-0 bg-gray-200 transition ease-in-out duration-300 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded inline-flex items-center w-full">
                                        <span class="mx-auto">
                                            <i class="fas fa-filter mr-2"></i>
                                            Select Filter
                                        </span>
                                    </button>

                                    <transition name="fadeUp" appear>
                                        <div v-if="openfilterDropdown" class="right-0 mt-2 w-48 bg-white rounded-md overflow-hidden shadow-xl z-50 w-full">
                                            <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200"><span class="text-gray-600">Category 1</span></a>
                                            <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200"><span class="text-gray-600">Category 1</span></a>
                                            <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200"><span class="text-gray-600">Category 1</span></a>
                                            <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200"><span class="text-gray-600">Category 1</span></a>
                                            <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200"><span class="text-gray-600">Category 1</span></a>
                                            <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200"><span class="text-gray-600">Category 1</span></a>
                                            <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200"><span class="text-gray-600">Category 1</span></a>
                                        </div>
                                    </transition>
                                    <!-- -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

The thing is, when it's "opened" the parent container expands.

How can i make so that when the dropdown is open, it doesn't expand its parent container, so that it looks just like when its closed, but with the dropdown items shown?

Answer 1

<div class="relative mt-1 px-4 grid grid-cols-12"> is containing the dropdown to be within the "white" container.

You need to make the dropdown relative to the parent of it to show up above it.

Here is the demo: https://play.tailwindcss.com/kW9w90OJW5