I'm using PefrectScroll in the notification list, but to prevent scrolling of the whole page while I'm scrolling in the notification list, I have to use overflow:auto and overscroll-behavior:contain.
When I put overflow:hidden to hide that extra scroll, the whole page scrolls again while I'm scrolling in the notifications list. Is there a way to hide that useless "double" scroll while I'm still using my perfect scroll, and the whole page prevent to scroll too ?
<div ref="notificationsDropdown" id="notifications-dropdown"
class="origin-top-right absolute right-0 mt-2 w-64 rounded-md shadow-lg opacity-0 scale-95 pointer-events-none top-full transform transition ease-out duration-100 bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-200 focus:outline-none"
role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="px-4 py-3 w-full text-center" role="none">
<p class="text-xl text-[#3690b5] font-bold" role="none">Notifications</p>
</div>
<div class="py-1 max-h-96 relative" tabindex="-1" id="notification list" role="none">
<li click.delegate="navigateToProject(notification.data.projectId)"
repeat.for="notification of projectNotifications"
class="text-gray-700 no-scroll-chain overscroll-contain list-items block px-4 py-2 text-sm border-b hover:bg-gray-200 transition-all duration-150 border-[#eee] cursor-pointer"
role="menuitem" tabindex="-1" id="menu-item-0">
<h5>${notification.data.text}</h5>
<p class="text-sm text-gray-400">
${transformDate(notification.timestamp)}
</p>
</li>
</div>
</div>`
Related
The goal is to hide an element behind a parent. There is a relative parent position, and a fixed child position, so when you scroll down, the fixed child will become visible and the parent will go up.
The image with yellow border shall go behind
Here's what I've tried:
<!-- hamburger menu -->
<div class="relative bg-white z-50 border-2 border-purple-900 w-[34%] h-auto flex justify-end items-center">
<div class="fixed top-6 right-1 z-20 border-2 border-yellow-500">
<a class="lg:hidden inline-block float-right text-red-600 mr-[3px] mt-1 p-[6px] bg-white rounded-full border-2 border-yagya-red" href="#">
<button id="mobile_menu1" class="relative outline-none w-7 h-7">
<div role="hidden" id="line" class="inset-0 w-4 h-0.5 m-auto rounded-full bg-yagya-red transition duration-300"></div>
<div role="hidden" id="line2" class="inset-0 w-4 h-0.5 mt-1 m-auto rounded-full bg-yagya-red transition duration-300"></div>
<div role="hidden" id="line2" class="inset-0 w-4 h-0.5 mt-1 m-auto rounded-full bg-yagya-red transition duration-300"></div>
</button>
</a>
</div>
</div>
thank you!
To add a z-index you have to use class:
z-10 : To bring that element forward
-z-10 : To bring that element backward
You can take the below example
<script src="https://cdn.tailwindcss.com"></script>
<!-- red with positive z-index -->
<div class="p-10">
<div class="w-24 h-24 bg-red-600 rounded-full z-10 absolute"></div>
<div class="w-24 h-24 bg-blue-600 rounded-full mt-10"></div>
</div>
<!-- red with negative z-index -->
<div class="p-10">
<div class="w-24 h-24 bg-red-600 rounded-full -z-10 absolute"></div>
<div class="w-24 h-24 bg-blue-600 rounded-full mt-10"></div>
</div>
FInd more here
I have following sample, written in tailwind css:
https://play.tailwindcss.com/f9iOK1e0oM
I want to have my control buttons on the bottom if the grid containers, however, they have different content sizes for the blue "tag" boxes, so the grid gets increased in height by some containers. however, as I am working with grid, all boxes are getting this height then. this is ok. But my control buttons should be always on the bottom of the containers, so that "Enabled" and "Delete" should not be so far away from bottom for the second container.
How to achieve this?
You need to add flex flex-col to the li element. And grow to the first child div and grow-0 max-h-max to the second child div.
<li class="flex flex-col col-span-1 divide-y divide-gray-200 rounded-lg bg-white shadow">
<div class=" grow flex w-full flex-col items-start justify-between p-6">
<div class="flex w-full items-start justify-between space-x-3">
<h3 class="truncate text-sm font-medium text-gray-900">243rfh83294d-23r8fj2n48r-24fi43bf</h3>
<span class="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"> running </span>
</div>
<p class="mt-1 whitespace-pre-wrap text-xs font-bold text-gray-500">Interval: <span class="font-normal">1234</span></p>
<p class="mt-1 whitespace-pre-wrap text-xs font-bold text-gray-500">Next run: <span class="font-normal">1234</span></p>
<p class="mt-1 whitespace-pre-wrap">
<span class="inline-block flex-shrink-0 rounded-full bg-blue-100 px-2 py-0.5 text-xs text-blue-800">test 1</span>
</p>
</div>
<div>
<div class="-mt-px flex shrink-0 grow-0 divide-x divide-gray-200 max-h-max">
<div class="flex w-0 flex-1">
<button class="relative -mr-px inline-flex w-0 flex-1 items-center justify-center rounded-bl-lg border border-transparent py-4 text-sm font-medium text-gray-700 hover:text-gray-500">
<span class="ml-3">Enabled</span>
</button>
</div>
<div class="-ml-px flex w-0 flex-1">
<button class="group relative inline-flex w-0 flex-1 items-center justify-center rounded-br-lg border border-transparent py-4 text-sm font-medium text-gray-700 transition hover:text-red-500">
<span class="ml-3">Delete</span>
</button>
</div>
</div>
</div>
</li>
https://play.tailwindcss.com/ilTMM5glku
I have done this only for the second card, but you should do it for all cards. So that when the content changes, the button row will always stick to the bottom and keep the same height in all cards.
Hope this helps.
I'm using Tailwind CSS and I want to show the white dropdown over the modal.
I tried using z-index but I can't make it work.
Any ideas?
This is my modal code:
<TransitionRoot as="template" :show="isOpen">
<Dialog as="div" class="inset-0 fixed overflow-y-auto">
<div class="flex min-h-screen text-center px-4 pt-4 pb-20 items-end justify-center sm:p-0 sm:block">
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
<DialogOverlay class="bg-gray-975 bg-opacity-85 inset-0 transition-opacity fixed" />
</TransitionChild>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:h-screen sm:inline-block sm:align-middle" aria-hidden="true"></span>
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200" leave-from="opacity-100 translate-y-0 sm:scale-100" leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
<div class="rounded-lg shadow-xl text-left transform transition-all text-gray-850 inline-block align-bottom overflow-hidden sm:max-w-lg sm:my-8 sm:w-full sm:align-middle dark:text-gray-200">
...
</div>
</TransitionChild>
</div>
</Dialog>
And this is my dropdown code:
<Listbox v-model="selectedPerson">
<div class="mt-1 relative z-50">
<ListboxButton
class="bg-white rounded-lg cursor-default shadow-md text-left w-full py-2 pr-10 pl-3 relative sm:text-sm focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-white focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-offset-orange-300 focus-visible:ring-offset-2">
<span class="block truncate">{{ selectedPerson.name }}</span>
<span class="flex pr-2 inset-y-0 right-0 absolute items-center pointer-events-none">
<SelectorIcon class="h-5 text-gray-400 w-5" aria-hidden="true" />
</span>
</ListboxButton>
...
</div>
Remove class overflow-hidden from <div class="rounded-lg shadow-xl text-left transform transition-all text-gray-850 inline-block align-bottom overflow-hidden sm:max-w-lg sm:my-8 sm:w-full sm:align-middle dark:text-gray-200">.
codesandbox
Change the class that sets the position of the child element from absolute to fixed
I'd like to create a dropdown-menu using tailwindcss. The menu is supposed to have the width w-3/5 and it should be right centered under it's parent menu element.
I created a codepen to demonstrate this: https://codepen.io/spqrinc/pen/Exjympz
This is the snippet:
<div class="group">
<div class="lg:relative w-full">
<button class="mt-1 block px-2 py-4 text-white font-semibold rounded-sm hover:bg-gray-700 md:mt-0 md:ml-2 inline-flex items-center justify-between w-full">
<span class="mr-24">Test</span>
</button>
</div>
<ul class="lg:absolute m-1 mt-4 w-3/5">
<div class="bg-gray-500 text-white w-full px-2 pt-2 pb-4 group-hover">
<li class="">
<a
class="block px-2 py-4 text-white font-semibold rounded-sm hover:bg-gray-700"
href="#">One</a>
</li>
<li class="">
<a class="block px-2 py-4 text-white font-semibold rounded-sm hover:bg-gray-700"
href="#">Two</a>
</li>
<li class="">
<a
class="block px-2 py-4 text-white font-semibold rounded-sm hover:bg-gray-700"
href="#">Three</a>
</li>
</div>
</ul>
</div>
As you can see, the submenu is visible, but it's not centered under it's parent element. A lot of it's width is not visible.
Of course I could do something like left-0 or right-0, but in this case menu elements that are centered in the navbar don't have their menu centered, too. So the submenu should always be centered if possible.
So my question is: How can I get this working as in this little sketch?
Here is how I have setup differently aligned drop downs:
https://codepen.io/forloops/pen/QWpKELQ
The key differences between each is:
left class: left-0
center classes: md:left-1/2 md:-translate-x-1/2
right class: right-0
You can find these classes on the element that has: data-ref='check this element class'
Please note: This example uses AlpineJS along with Tailwind CSS v2
I have a web app I'm building out in Rails 5, Ruby 2.4. Im using Tailwindcss as my design framework.
I have a hero image (below) in which I'm using a tailwind like alert as a banner to advertise a new web store for merch. It sits exactly where I want it to im the hero, however on page scroll it floats over my fixed nav, and in mobile view with the nav menu dropped down it floats overtop of it blocking the nav view.
Im not too sure how to fix this so it sits behind the nav and dosnt obstruct the nav functionality.
link to site for viewing
Loadlead website
my hero image code:
<div class="flex flex-wrap sm:block bg-transparent" id="header-hero">
<div class="container mx-auto">
/* BANNER THATS CAUSING ISSUES */
<div class="bg-transparent text-center py-4 lg:px-4">
<div class="p-2 bg-load-lead-green items-center text-white leading-none lg:rounded-full flex lg:inline-flex opacity-75 border-b-4 border-black md:mt-8">
<span class="flex rounded-full bg-blue uppercase px-2 py-1 text-xs font-bold mr-3 border-b-2 border-black">New</span>
<span class="font-semibold mr-2 text-left flex-auto">Pre-order LoadLead gear in our new web store</span>
<svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/></svg>
</div>
</div>
/* END BANNER */
<div class="flex py-8 px-4 sm:px-8">
<div class="w-full py-8">
<p class="text-4xl text-black font-sans font-bold mb-1">Trucking. Simplified</p>
<p class="text-xl text-black sm:text-lg mb-6 font-sans font-semibold">Minimize your trucks downtime & keep your loads moving!</p>
<a class="bg-blue text-white no-underline uppercase text-sm px-4 py-2 rounded-full font-bold hover:bg-blue border border-b-4 border-black hover:border-transparent cursor-not-allowed" href="/#">Take a Tour</a>
<a class="bg-load-lead-green text-white no-underline uppercase text-sm px-4 py-2 rounded-full font-bold hover:bg-load-lead-green border border-b-4 border-black hover:border-transparent cursor-not-allowed" href="/#">Join the Community</a>
</div>
</div>
</div>
</div>
Any help here would be greatly appreciated!
You need to have your hero as relative and the banner as absolute positions.