htmlcsstailwind-cssflowbite
incorrect overflow with dropdown in HTML table
I am trying to build a HTML table with tailwind and flowbite with a dropdown, but unfortunately when the dropdown is opened it does not display properly on mobile devices (basically instead of showing up above the table, it shows up in, which requires a super weird scrolling to access the content).
Here is a live demo of the issue: https://s4s-portal-web.sys.polysource.ch, then click on "recrutement du staff"
Could you help me finding out what CSS changes would I need for it to be displayed properly?
- I want to keep the horizontal scrolling for the table on mobile
- I fixed the issue on desktop by disabling overflow-x-auto (because I don't need scrolling on desktop)
<!-- todo fix overflow-x-auto -->
<div class="relative flex md:justify-center overflow-x-auto sm:overflow-x-visible">
<table class="w-2/3 text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-md overflow-hidden">
<thead
class="text-xs text-gray-700 uppercase bg-s4s-purple-900 text-white dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">
Nom
</th>
<th scope="col" class="px-6 py-3">
Candidature
</th>
<th scope="col" class="px-6 py-3">
Rôle
</th>
</tr>
</thead>
<tbody>
<tr class="bg-s4s-redwood-600 border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
v-for="user in users">
<th scope="row"
class="flex items-center px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<div class="ps-3">
<div class="text-base font-semibold">{{ user.name }}</div>
<div class="font-normal text-gray-500">{{ user.email }}</div>
</div>
</th>
<td class="px-6 py-4">
<!-- Modal toggle -->
<a href="#" type="button" @click="() => setCurrentUser(user)"
data-modal-target="userCandidModal" data-modal-show="userCandidModal"
class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Ouvrir</a>
</td>
<td class="px-6 py-4">
<button :id="'dropdownDividerButton-' + user.email"
:data-dropdown-toggle="'dropdownDivider-' + user.email"
class="text-white bg-s4s-purple-900 focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 focus:ring-s4s-purple-600"
type="button">Choisir le rôle <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m1 1 4 4 4-4" />
</svg>
</button>
<!-- Dropdown menu -->
<div :id="'dropdownDivider-' + user.email"
class="z-100 absolute hidden bg-s4s-purple-900 divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
<ul class="py-2 text-sm text-white dark:text-gray-200"
:aria-labelledby="'dropdownDividerButton-' + user.email">
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Assistant</a>
</li>
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Speaker</a>
</li>
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Conception</a>
</li>
</ul>
<div class="py-2">
<a href="#"
class="block px-4 py-2 text-sm text-white hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Pas
de rôle</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div id="userCandidModal" tabindex="-1" aria-hidden="true"
class="fixed top-0 left-0 right-0 z-50 items-center justify-center hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative w-full max-w-2xl max-h-full">
<!-- Modal content -->
<form class="relative bg-s4s-redwood-500 rounded-lg shadow dark:bg-gray-700">
<!-- Modal header -->
<div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
Candidature de {{ currentUser.name }}
</h3>
<button type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-hide="userCandidModal">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<div>
{{ currentUser.candidature }}
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="flex justify-center mt-10">
<button type="button" class="text-s4s-redwood-300 bg-s4s-purple-900 hover:bg-blue-800 focus:ring-4 focus:ring-s4s-redwood-900 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Sauvegarder</button>
</div>
thank you
Solution
No element can go outside its parent if the parent has any overflow value other than visible. This means there is no CSS change you can make that can create your desired outcome. Rather, you'd need to look at having the dropdown HTML outside the overflow parent:
tailwind.config = {
theme: {
extend: {
colors: {
's4s-purple': tailwind.colors.purple,
},
},
},
}<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet" />
<script src="https://cdn.tailwindcss.com/3.4.3"></script>
<!-- todo fix overflow-x-auto -->
<div class="relative flex md:justify-center overflow-x-auto sm:overflow-x-visible">
<table class="w-2/3 text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-md overflow-hidden">
<thead class="text-xs text-gray-700 uppercase bg-s4s-purple-900 text-white dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">Nom</th>
<th scope="col" class="px-6 py-3">Candidature</th>
<th scope="col" class="px-6 py-3">Rôle</th>
</tr>
</thead>
<tbody>
<tr class="bg-s4s-redwood-600 border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600" v-for="user in users">
<th scope="row" class="flex items-center px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<div class="ps-3">
<div class="text-base font-semibold">{{ user.name }}</div>
<div class="font-normal text-gray-500">{{ user.email }}</div>
</div>
</th>
<td class="px-6 py-4">
<!-- Modal toggle -->
<a href="#" type="button" @click="() => setCurrentUser(user)" data-modal-target="userCandidModal" data-modal-show="userCandidModal" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Ouvrir</a>
</td>
<td class="px-6 py-4">
<button id="dropdownDividerButtonFoo" data-dropdown-toggle="dropdownDivider-foo" class="text-white bg-s4s-purple-900 focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 focus:ring-s4s-purple-600" type="button">
Choisir le rôle
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
</svg>
</button>
</td>
</tr>
</tbody>
</table>
<div id="userCandidModal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 items-center justify-center hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative w-full max-w-2xl max-h-full">
<!-- Modal content -->
<form class="relative bg-s4s-redwood-500 rounded-lg shadow dark:bg-gray-700">
<!-- Modal header -->
<div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Candidature de {{ currentUser.name }}</h3>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="userCandidModal">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<div>{{ currentUser.candidature }}</div>
</div>
</form>
</div>
</div>
</div>
<!-- Dropdown menu -->
<div id="dropdownDivider-foo" class="z-100 absolute hidden bg-s4s-purple-900 divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
<ul class="py-2 text-sm text-white dark:text-gray-200" aria-labelledby="dropdownDividerButtonFoo">
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Assistant</a>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Speaker</a>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Conception</a>
</li>
</ul>
<div class="py-2">
<a href="#" class="block px-4 py-2 text-sm text-white hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Pas de rôle</a>
</div>
</div>
<div class="flex justify-center mt-10">
<button type="button" class="text-s4s-redwood-300 bg-s4s-purple-900 hover:bg-blue-800 focus:ring-4 focus:ring-s4s-redwood-900 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Sauvegarder</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>- Saving the manipulated DOM/HTML after editing it with Firebug
- How to check file MIME type with JavaScript before upload?
- HTML list-style-type dash
- Show outside element part with opacity - fabric js - controlsAboveOverlay
- How do I make a transparent canvas in html5?
- Setting the width depending on the height of its parent
- adding event listener to input box and checking if it's empty
- How to make an HTML back link?
- how to set index by choosing in javascript
- Position a responsive circle in the top-right corner of the screen
- Failed to execute 'atob' on 'Window'
- Java/Swing offscreen rendering (Cobra HTMLPanel -> BufferedImage) Problem: Component doesn't finish redrawing first
- Can't upload file via HTML form using <calcite-input> component ("Failed to set the 'value' property on 'HTMLInputElement'")
- How to center an unordered list?
- Typed.js Not Working Properly Glitching Text and Double Cursor in ReactJS
- How to freeze thead section of the table
- Check if button pressed with if statement in JS
- Why is my regex valid with the RegExp u flag, but not with the v flag and does not work in HTML pattern attribute?
- How redirect php Window.location.href or Window.open () methods in php and JavaScript
- How do I change the font-size of an <option> element within <select>?
- How to use next.js Image component with HTML <picture> element?
- React scroll to anchor when opening URL in browser
- Is there a way to move HTML between bowser tabs in Angular?
- Pass data from html JS webview to C# in MAUI
- How can I vertically align elements in a div?
- html fields in livewire is not updating the data
- How can I center text (horizontally and vertically) inside a div block?
- How can I horizontally center an element?
- HTML/CSS - Why background-color turns white when printing?
- Collapse HTML table rows by default