I’m working on an Angular project using Flowbite, and I’m encountering two main issues:
- The dropdown menu for actions (with options like “Modifier” “Consulter” “Clôturer”) doesn’t display when clicked. I believe the issue might be related to CSS classes, but I’m not sure how to fix it.
- I want to make my table scrollable both vertically and horizontally.
I’ve tried various approaches to solve these problems but haven’t had any success so far. I was expecting the dropdown to appear when the button was clicked, and for the table to be scrollable both vertically and horizontally.
Here’s the relevant code and a screenshot of the issue:
<div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm sm:p-6">
<div class="items-center justify-between lg:flex">
<div class="mb-4 lg:mb-0">
<span class="text-sm font-normal text-gray-500"
>Choisissez le(s) actions que vous souhaitez compléter:</span
>
</div>
</div>
<div class="mt-6 flex flex-col">
<div class="overflow-x-auto">
<div class="inline-block min-w-full align-middle">
<div class="overflow-hidden shadow">
<table
class="min-w-full table-fixed border-collapse border border-gray-200"
>
<thead class="bg-gray-50">
<tr>
<th
scope="col"
class="border border-white border-r-gray-200 bg-white text-left text-xs font-medium tracking-wider text-gray-500"
></th>
<th
scope="col"
class="border border-gray-200 p-4 text-left text-xs font-medium tracking-wider text-gray-500"
>
Nom de l'action
</th>
<th
scope="col"
class="border border-gray-200 p-4 text-left text-xs font-medium tracking-wider text-gray-500"
>
Date début
</th>
<th
scope="col"
class="border border-gray-200 p-4 text-left text-xs font-medium tracking-wider text-gray-500"
>
Date fin
</th>
<th
scope="col"
class="border border-gray-200 p-4 text-left text-xs font-medium tracking-wider text-gray-500"
>
Date de réalisation
</th>
<th
scope="col"
class="border border-gray-200 p-4 text-left text-xs font-medium tracking-wider text-gray-500"
>
Responsable
</th>
<th
scope="col"
class="border border-gray-200 p-4 text-left text-xs font-medium tracking-wider text-gray-500"
>
Livrable
</th>
<th
scope="col"
class="border border-gray-200 p-4 text-left text-xs font-medium tracking-wider text-gray-500"
>
État
</th>
<th
scope="col"
class="border border-gray-200 p-4 text-left text-xs font-medium tracking-wider text-gray-500"
>
Observation
</th>
<th scope="col" class="border border-white bg-white p-2"></th>
<th scope="col" class="border border-white bg-white"></th>
<!-- <th
scope="col"
class="p-4 text-left text-xs font-medium tracking-wider text-gray-500"
></th> -->
</tr>
</thead>
<tbody class="bg-white">
<tr *ngFor="let action of actions; let i = index">
<td class="border border-white border-r-gray-200 pr-2">
<button
id="dropdownComment1Button"
data-dropdown-toggle="dropdownComment1"
class="inline-flex items-center rounded-lg bg-white p-2 text-center text-sm font-medium text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-50"
type="button"
>
<svg
class="h-5 w-5 text-gray-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
></path>
</svg>
</button>
<!-- Dropdown menu -->
<div
id="dropdownComment1"
class="z-50 hidden w-36 divide-y divide-gray-100 rounded bg-white shadow"
>
<ul
class="py-1 text-sm text-gray-700"
aria-labelledby="dropdownMenuIconHorizontalButton"
>
<li>
<a class="block px-4 py-2 hover:bg-gray-100"
>Modifier</a
>
</li>
<li>
<a class="block px-4 py-2 hover:bg-gray-100"
>Consulter</a
>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"
>Clôturer</a
>
</li>
</ul>
</div>
</td>
<td
class="max-w-xs overflow-hidden truncate border border-gray-200 p-4 text-sm font-normal text-gray-500 dark:text-white"
>
{{ action.name }}
</td>
<td
class="border border-gray-200 p-4 text-sm font-normal text-gray-500 dark:text-gray-400"
>
{{ action.startDate | date: "shortDate" }}
</td>
<td
class="border border-gray-200 p-4 text-sm font-normal text-gray-500 dark:text-white"
>
{{ action.endDate | date: "shortDate" }}
</td>
<td
class="border border-gray-200 p-4 text-sm font-normal text-gray-500 dark:text-gray-400"
>
{{ action.realizationDate | date: "shortDate" }}
</td>
<td
class="border border-gray-200 p-4 text-sm font-normal text-gray-500 dark:text-gray-400"
>
{{ action.responsible }}
</td>
<td
class="border border-gray-200 p-4 text-sm font-normal text-gray-500 dark:text-gray-400"
>
{{ action.deliverable }}
</td>
<td
class="border border-gray-200 p-4 text-sm font-normal text-gray-500 dark:text-gray-400"
>
<span *ngIf="action.progressStatus > 0">
{{ action.progressStatus / 100 | percent: "1.0-0" }}
</span>
</td>
<td
class="border border-gray-200 p-4 text-sm font-normal text-gray-500 dark:text-gray-400"
>
{{ action.observation }}
</td>
<td
class="border border-white pl-2 text-sm font-normal text-gray-500"
>
<div>
<svg
*ngIf="
action.attachments && action.attachments.length > 0
"
class="h-5 w-5 text-gray-500"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 8v8a5 5 0 1 0 10 0V6.5a3.5 3.5 0 1 0-7 0V15a2 2 0 0 0 4 0V8"
/>
</svg>
</div>
</td>
<td
class="border border-white pl-2 text-sm font-normal text-gray-500"
>
<div
[ngClass]="{
'h-4 w-4 rounded-full': true,
'bg-primary-700': action.progressStatus == 100,
'bg-warning-500':
action.progressStatus >= 50 &&
action.progressStatus < 100,
'bg-red-600': action.progressStatus < 50
}"
></div>
</td>
<!-- <td class="border border-gray-200 p-4">
<div class="flex">
<button
type="button"
(click)="openEditActionModal(action)"
class="inline-flex items-center rounded-lg px-1 py-1 text-center text-sm font-medium text-primary-700 focus:outline-none"
>
<svg
class="h-4 w-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"
></path>
<path
fill-rule="evenodd"
d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
clip-rule="evenodd"
></path>
</svg>
</button>
<button
type="button"
(click)="openActionDetailsModal(action)"
class="inline-flex items-center rounded-lg px-3 py-2 text-center text-sm font-medium text-warning-800 focus:outline-none"
>
<svg
class="h-4 w-4"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 24 24"
>
<path
fill-rule="evenodd"
d="M4.998 7.78C6.729 6.345 9.198 5 12 5c2.802 0 5.27 1.345 7.002 2.78a12.713 12.713 0 0 1 2.096 2.183c.253.344.465.682.618.997.14.286.284.658.284 1.04s-.145.754-.284 1.04a6.6 6.6 0 0 1-.618.997 12.712 12.712 0 0 1-2.096 2.183C17.271 17.655 14.802 19 12 19c-2.802 0-5.27-1.345-7.002-2.78a12.712 12.712 0 0 1-2.096-2.183 6.6 6.6 0 0 1-.618-.997C2.144 12.754 2 12.382 2 12s.145-.754.284-1.04c.153-.315.365-.653.618-.997A12.714 12.714 0 0 1 4.998 7.78ZM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
</td> -->
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Screenshot of the dropdown issue
Any advice on how to resolve these issues would be greatly appreciated. Thanks!