HTML 表格中的下拉菜单溢出不正确
问题描述 投票：0回答：1
我正在尝试构建一个带有 tailwind 和 flowbite 的 HTML 表格，并带有下拉菜单，但不幸的是，当打开下拉菜单时，它无法正确显示在移动设备上（基本上，它不是显示在表格上方，而是显示在，其中需要超级奇怪的滚动才能访问内容）。
这里是该问题的现场演示：https://s4s-portal-web.sys.polysource.ch，然后点击“recrutement du Staff”
你能帮我找出需要对 CSS 进行哪些更改才能正确显示吗？
- 我想在移动设备上保持表格的水平滚动
- 我通过禁用overflow-x-auto解决了桌面上的问题（因为我不需要在桌面上滚动）
<!-- 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>
谢谢你
1个回答
0
投票
投票
如果父元素具有除
overflowvisibleoverflowtailwind.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>最新问题
- 反应子组件无限重新渲染
- 出现错误“服务器可能不支持客户端请求的 TLS 协议版本：（TLSv1.2、TLSv1.3）。”在 gradlew genSources 上
- 我可以禁用Colab组合吗
- Golang Go Routine 与 WaitGroup 执行相同的代码两次
- 我不小心将当前的存储库更改为 main，而不是推送到它，现在我所有的文件都被反转了
- 在 React Native 中渲染图形
- 如何将nvarchar数据类型图像显示到SSRS图像控件？
- Alpine 表达式错误：无法读取未定义的属性（读取“名称”）
- 如何使用正则表达式过滤ansible中的字符串
- 用nginx重写所有请求到index.php
- 是否可以在 Google Apps Script V8 中获取堆栈跟踪
- 如何在iis服务器上运行python
- `EXISTS`的运算符优先级
- Pimcore 自定义管理样式/主题
- 生产中显示 nginx 错误而不是 laravel 错误
- 如何在flutter中添加虚线TableBorder小部件？
- 查询Facebook Opengraph下一页参数
- 如何使用新数据从惯性后调用重定向回惯性
- EKS：无法绑定到地址 http://[::]:8080 已在使用中
- 找不到问题所在：SyntaxError：Object.register处的JSON输入意外结束[作为mutationFn]（api-clients.ts：16：41）
© www.soinside.com 2019 - 2024. All rights reserved.