javascripthtmltailwind-cssalpine.js
How to resolve the highlight section in Tailwind CSS
If I click the "View Log" and "Add Note" button, The popup will open. If Popup is open means, there is 2 marked section is highlighted. but at the same time If I click other button for popup it was working fine. Please check the screenshot for highlighted section.
.
Here I attach the code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/alpine.min.js" defer></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<div class="relative">
<div class="w-full overflow-x-scroll ">
<table class="divide-y divide-gray-200 table-auto">
<thead
class="text-xs font-medium tracking-wider text-left text-white uppercase bg-blue-600 whitespace-nowrap">
<tr class="py-4 divide-x">
<th scope="col" class="sticky left-0 z-10 p-4 bg-blue-600">
Name</th>
<th scope="col" class="p-4">
In Time</th>
</tr>
</thead>
<tbody
class="text-sm bg-white divide-y divide-gray-200 whitespace-nowrap">
<tr>
<td class="sticky left-0 w-full p-4 bg-white whitespace-nowrap">
<div class="flex items-center gap-2 w-max">
<img class="w-8 h-8 rounded-full"
src="https://randomuser.me/api/portraits/men/11.jpg"
alt="">
<div>
<a href="" class="font-medium text-blue-600">John
Doe</a>
<p class="text-xs text-gray-600">NA_1110</p>
</div>
</div>
<div>
<div class="flex items-center gap-4">
<div x-data="{ 'showModal': false }" @keydown.escape="showModal = false">
<button @click="showModal = true" class="text-sm text-blue-600">View Logs
</button>
<div class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black bg-opacity-50" x-show="showModal" style="display: none;">
<!-- Modal inner -->
<div class="w-11/12 px-6 py-4 mx-auto text-left bg-white rounded shadow-lg md:max-w-md" @click.away="showModal = false" x-transition:enter="motion-safe:ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100">
<!-- Title / Close-->
<div class="flex items-center justify-between">
<p class="font-bold text-gray-900">
Attendance Log
</p>
<span @click="showModal = false">
<svg class="w-5 h-5 text-gray-900" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
</path>
</svg>
</span>
</div>
<!-- content -->
<div>
<p><span>Elavarasan</span> |
<span>25-04-2022</span>
</p>
</div>
</div>
</div>
</div>
<div x-data="{ 'showModal': false }">
<button @click="showModal = true" class="text-sm text-blue-600">
Add Note</button>
<div class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black bg-opacity-50" x-show="showModal" style="display: none;">
<!-- Modal inner -->
<div class="w-11/12 px-6 py-4 mx-auto text-left bg-white rounded shadow-lg md:max-w-md" @click.away="showModal = false" x-transition:enter="motion-safe:ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100">
<!-- Title / Close-->
<div class="flex items-center justify-between">
<div>
<p class="font-bold text-gray-900">
Add Note
</p>
<p class="text-sm font-semibold text-gray-600">
Elavarasan | 27-11-2023
</p>
</div>
<span @click="showModal = false">
<svg class="w-5 h-5 text-gray-900" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
</path>
</svg>
</span>
</div>
<!-- content -->
<div class="w-full mt-4">
<div>
<label class="text-sm text-gray-600" for="">Add Notes</label>
<textarea rows="3" class="relative block w-full p-2 px-3 py-3 mt-1 text-gray-900 placeholder-gray-400 border border-gray-400 rounded shadow-sm appearance-none focus:outline-none focus:ring-blue-600 focus:border-blue-600 focus:z-10" spellcheck="false"></textarea>
</div>
<div class="flex items-center gap-4 pt-6">
<button class="w-full p-2 font-semibold text-gray-900 bg-gray-100 rounded">Cancel</button>
<button class="w-full p-2 font-semibold text-white bg-blue-600 rounded">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-sm text-gray-900">
10:00 AM
</span>
<div x-data="{ 'showModal': false }">
<button @click="showModal = true" class="flex items-center text-blue-600"><span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z">
</path>
</svg></span></button>
<div class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black bg-opacity-50" x-show="showModal" style="display: none;">
<!-- Modal inner -->
<div class="w-11/12 px-6 py-4 mx-auto text-left bg-white rounded shadow-lg md:max-w-md" @click.away="showModal = false" x-transition:enter="motion-safe:ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100">
<!-- Title / Close-->
<div class="flex items-center justify-between">
<p class="font-bold text-gray-900">
Edit Time
</p>
<span @click="showModal = false">
<svg class="w-5 h-5 text-gray-900" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</span>
</div>
<!-- content -->
<div class="w-full mt-4">
<div class="space-y-2 divide-y">
<div>
<label class="text-sm text-gray-600" for="">Time</label>
<div>
<input class="w-16 p-2 border border-gray-400 rounded-md" type="number">
<span class="font-bold">:</span>
<input class="w-16 p-2 border border-gray-400 rounded-md" type="number">
<span class="font-bold">:</span>
<select class="w-16 p-2 border border-gray-400 rounded-md">
<option value="">AM</option>
<option value="">PM</option>
</select>
</div>
</div>
<div>
<label class="text-sm text-gray-600" for="">Reason</label>
<textarea rows="3" class="relative block w-full p-2 px-3 py-3 mt-1 text-gray-900 placeholder-gray-400 border border-gray-400 rounded shadow-sm appearance-none focus:outline-none focus:ring-blue-600 focus:border-blue-600 focus:z-10" spellcheck="false"></textarea>
</div>
<div class="flex items-center justify-center w-full gap-4 pt-4">
<div class="w-1/2">
<button class="w-full p-2 font-semibold text-white bg-blue-600 rounded-md">Update</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
</div>
<div
class="flex flex-col items-center justify-center gap-4 pt-6 lg:flex-row lg:justify-between">
<div class="flex items-center">
<p class="pr-2 text-sm font-medium">Rows per page</p>
<select id="jobtype" name="jobtype" autocomplete="jobtype"
class="block w-16 p-1 mt-1 text-sm bg-white border border-gray-400 rounded shadow-sm disabled:cursor-not-allowed focus:outline-none focus:ring-blue-600 focus:border-blue-600 sm:text-base">
<option>10</option>
<option>25</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div>
<nav class="relative z-0 inline-flex -space-x-px shadow-sm"
aria-label="Pagination">
<a href="#"
class="relative inline-flex items-center px-2 py-2 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md hover:bg-blue-100">
<span class="sr-only">Previous</span>
<!-- Heroicon name: chevron-left -->
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd"></path>
</svg>
</a>
<a href="#"
class="relative inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 hover:bg-blue-100">
1
</a>
<a href="#"
class="relative inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 hover:bg-blue-100">
2
</a>
<a href="#"
class="relative items-center hidden px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 md:inline-flex hover:bg-blue-100">
3
</a>
<a href="#"
class="relative inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 hover:bg-blue-100">
4
</a>
<a href="#"
class="relative inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 hover:bg-blue-100">
5
</a>
<a href="#"
class="relative inline-flex items-center px-2 py-2 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md hover:bg-blue-100">
<span class="sr-only">Next</span>
<!-- Heroicon name: chevron-right -->
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"></path>
</svg>
</a>
</nav>
</div>
</div>
</div>
</body>
</html>Solution
Your issue comes from the fact that the View log and Add note modals are inside this element:
<td class="sticky left-0 w-full p-4 bg-white whitespace-nowrap">
This element would be the stacking context for the modals. This means that relative to the navigation bar, pagination, etc, the effective z-index of the modals are 0. This is because the z-index is relative to other elements inside the same stacking context, thus the z-index: 30 of these modals is only relative to other elements inside the <td> element. Outside of this <td> element, the modals are effectively "grouped" with this <td> element's z-index of 0.
The other modal triggered in the Time column works fine since its stacking context is the root of the document, <html>, thus its z-index: 30 would apply in a meaningful way to other elements in the DOM.
You could consider increasing the z-index of the stacking context parent of the modals that don't work:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/alpine.min.js" defer></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<div class="relative">
<div class="w-full overflow-x-scroll ">
<table class="divide-y divide-gray-200 table-auto">
<thead class="text-xs font-medium tracking-wider text-left text-white uppercase bg-blue-600 whitespace-nowrap">
<tr class="py-4 divide-x">
<th scope="col" class="sticky left-0 z-10 p-4 bg-blue-600">
Name</th>
<th scope="col" class="p-4">
In Time</th>
</tr>
</thead>
<tbody class="text-sm bg-white divide-y divide-gray-200 whitespace-nowrap">
<tr>
<td class="sticky left-0 w-full p-4 bg-white whitespace-nowrap z-30">
<div class="flex items-center gap-2 w-max">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="">
<div>
<a href="" class="font-medium text-blue-600">John
Doe</a>
<p class="text-xs text-gray-600">NA_1110</p>
</div>
</div>
<div>
<div class="flex items-center gap-4">
<div x-data="{ 'showModal': false }" @keydown.escape="showModal = false">
<button @click="showModal = true" class="text-sm text-blue-600">View Logs
</button>
<div class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black bg-opacity-50" x-show="showModal" style="display: none;">
<!-- Modal inner -->
<div class="w-11/12 px-6 py-4 mx-auto text-left bg-white rounded shadow-lg md:max-w-md" @click.away="showModal = false" x-transition:enter="motion-safe:ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100">
<!-- Title / Close-->
<div class="flex items-center justify-between">
<p class="font-bold text-gray-900">
Attendance Log
</p>
<span @click="showModal = false">
<svg class="w-5 h-5 text-gray-900" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
</path>
</svg>
</span>
</div>
<!-- content -->
<div>
<p><span>Elavarasan</span> |
<span>25-04-2022</span>
</p>
</div>
</div>
</div>
</div>
<div x-data="{ 'showModal': false }">
<button @click="showModal = true" class="text-sm text-blue-600">
Add Note</button>
<div class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black bg-opacity-50" x-show="showModal" style="display: none;">
<!-- Modal inner -->
<div class="w-11/12 px-6 py-4 mx-auto text-left bg-white rounded shadow-lg md:max-w-md" @click.away="showModal = false" x-transition:enter="motion-safe:ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100">
<!-- Title / Close-->
<div class="flex items-center justify-between">
<div>
<p class="font-bold text-gray-900">
Add Note
</p>
<p class="text-sm font-semibold text-gray-600">
Elavarasan | 27-11-2023
</p>
</div>
<span @click="showModal = false">
<svg class="w-5 h-5 text-gray-900" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
</path>
</svg>
</span>
</div>
<!-- content -->
<div class="w-full mt-4">
<div>
<label class="text-sm text-gray-600" for="">Add Notes</label>
<textarea rows="3" class="relative block w-full p-2 px-3 py-3 mt-1 text-gray-900 placeholder-gray-400 border border-gray-400 rounded shadow-sm appearance-none focus:outline-none focus:ring-blue-600 focus:border-blue-600 focus:z-10" spellcheck="false"></textarea>
</div>
<div class="flex items-center gap-4 pt-6">
<button class="w-full p-2 font-semibold text-gray-900 bg-gray-100 rounded">Cancel</button>
<button class="w-full p-2 font-semibold text-white bg-blue-600 rounded">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-sm text-gray-900">
10:00 AM
</span>
<div x-data="{ 'showModal': false }">
<button @click="showModal = true" class="flex items-center text-blue-600"><span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z">
</path>
</svg></span></button>
<div class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black bg-opacity-50" x-show="showModal" style="display: none;">
<!-- Modal inner -->
<div class="w-11/12 px-6 py-4 mx-auto text-left bg-white rounded shadow-lg md:max-w-md" @click.away="showModal = false" x-transition:enter="motion-safe:ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100">
<!-- Title / Close-->
<div class="flex items-center justify-between">
<p class="font-bold text-gray-900">
Edit Time
</p>
<span @click="showModal = false">
<svg class="w-5 h-5 text-gray-900" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</span>
</div>
<!-- content -->
<div class="w-full mt-4">
<div class="space-y-2 divide-y">
<div>
<label class="text-sm text-gray-600" for="">Time</label>
<div>
<input class="w-16 p-2 border border-gray-400 rounded-md" type="number">
<span class="font-bold">:</span>
<input class="w-16 p-2 border border-gray-400 rounded-md" type="number">
<span class="font-bold">:</span>
<select class="w-16 p-2 border border-gray-400 rounded-md">
<option value="">AM</option>
<option value="">PM</option>
</select>
</div>
</div>
<div>
<label class="text-sm text-gray-600" for="">Reason</label>
<textarea rows="3" class="relative block w-full p-2 px-3 py-3 mt-1 text-gray-900 placeholder-gray-400 border border-gray-400 rounded shadow-sm appearance-none focus:outline-none focus:ring-blue-600 focus:border-blue-600 focus:z-10" spellcheck="false"></textarea>
</div>
<div class="flex items-center justify-center w-full gap-4 pt-4">
<div class="w-1/2">
<button class="w-full p-2 font-semibold text-white bg-blue-600 rounded-md">Update</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
</div>
<div class="flex flex-col items-center justify-center gap-4 pt-6 lg:flex-row lg:justify-between">
<div class="flex items-center">
<p class="pr-2 text-sm font-medium">Rows per page</p>
<select id="jobtype" name="jobtype" autocomplete="jobtype" class="block w-16 p-1 mt-1 text-sm bg-white border border-gray-400 rounded shadow-sm disabled:cursor-not-allowed focus:outline-none focus:ring-blue-600 focus:border-blue-600 sm:text-base">
<option>10</option>
<option>25</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div>
<nav class="relative z-0 inline-flex -space-x-px shadow-sm" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-2 py-2 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md hover:bg-blue-100">
<span class="sr-only">Previous</span>
<!-- Heroicon name: chevron-left -->
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd"></path>
</svg>
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 hover:bg-blue-100">
1
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 hover:bg-blue-100">
2
</a>
<a href="#" class="relative items-center hidden px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 md:inline-flex hover:bg-blue-100">
3
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 hover:bg-blue-100">
4
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 hover:bg-blue-100">
5
</a>
<a href="#" class="relative inline-flex items-center px-2 py-2 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md hover:bg-blue-100">
<span class="sr-only">Next</span>
<!-- Heroicon name: chevron-right -->
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"></path>
</svg>
</a>
</nav>
</div>
</div>
</div>
</body>
</html>- Chunk downloading of the big files right to the hard drive
- My custom CSS transition animation is not working on hover after I added AOS JS library
- how to get the Google analytics client ID
- Toggle vue-multiselect close/open on button click
- Best way to filter an objects's properties for data
- Passing function with arguments as a prop and invoking it internally in React
- Outlook calendar don't render with FullCalendar
- Is there a way to validate and allow only https url's using .isUri i.e. without using Regex in JavaScript?
- How to clear react native webview cookies?
- Skipping a test in Cypress conditionally
- How can I get all the HTML in a document or node containing shadowRoot elements
- Typescript: No index signature with a parameter of type 'string' was found on type '{ "A": string; }
- Retain Twitter Bootstrap Collapse state on Page refresh/Navigation
- How to get "Results per Row" (from a 'clicked entry' off a "dropdown menu") to show up correctly?
- Is there is a C# function which is similar to .Map() in JavaScript?
- How to trigger SVG render same as manual DOM edit in Chrome using JS?
- How do I test a Node.JS Script that is not a module and runs as soon as it's called?
- Set element width based on a string that is not in the element
- Testing JavaScript Written for the Browser in Node JS
- Where are the trailing commas coming from in these radio buttons?
- How to verify a signature from the Phantom wallet?
- How to get the value of a Google Chrome flag using Javascript
- event.preventDefault cannot block clipboard paste in chatgpt.com prompt box
- Should I use ref or findDOMNode to get react root dom node of an element?
- Disable button for 5 seconds with different label and change after it
- JavaScript - Get all but last item in array
- React-Redux: Should all component states be kept in Redux Store
- Is it possible to use Closure Compiler ADVANCED_OPTIMIZATIONS with jQuery?
- Capture selected option returns not defined instead
- Uncaught TypeError: matchExpr[type].exec is not a function