I have this code:
<div id="toast-default" class="flex items-center p-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
<div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Fire icon</span>
</div>
<div class="ml-3 text-sm font-normal break-words">Set yourself freesdfjhskdhfkhsdfhkshdfkjhksdfksjdfhkjshdkf.</div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-default" aria-label="Close">
<span class="sr-only">Close</span>
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
This text: Set yourself freesdfjhskdhfkhsdfhkshdfkjhksdfksjdfhkjshdkf. overflow the width of the component.
For solving this i used: break-words class that should solve my issue but it anyway does not work.
Question: How to break the overflow text in my case? What class should i use?
DEMO: https://play.tailwindcss.com/rBM8GxwwVo
You should also set overflow-hidden to prevent the div from getting wider than it's parent.
https://play.tailwindcss.com/pYP5d3B4q4
Add width to the element. Also don't forget to work with the grid-based widths
<script src="https://cdn.tailwindcss.com"></script>
<div id="toast-default" class="flex items-center p-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
<div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Fire icon</span>
</div>
<!-- ADD WIDTH TO THE ELEMENT -->
<div class="ml-3 text-sm font-normal w-9/12 break-words">
Set yourself freesdfjhskdhfkhsdfhkshdfkjhksdfksjdfhkjshdkf.</div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-default" aria-label="Close">
<span class="sr-only">Close</span>
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
Related
I've been struggling for hours with this problem, basically i am making an navbar using tailwind, and every element in the sidebar should have a tooltip the toolstips works but when i scroll the div the tooltip does not follow the content correctly. I tried change a lot of things but without sucess, maybe you guys css experts can help me ;)
The content not following the selected button
How it should be...
Here the code so far:
<div className="w-screen h-screen m-0 p-0">
<div className="flex flex-row w-full h-full">
{/* Sidenav MD */}
<div className="flex flex-col w-[80px] h-full flex-none bg-white items-center justify-between">
<div className="w-full flex flex-col space-y-2 p-2 items-center overflow-y-auto">
<div className="flex flex-none justify-center items-center w-10 h-10 bg-black rounded-md">
<span className="text-lg text-white">X</span>
</div>
<div className="group flex flex-row items-center">
<div className="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-7 h-7 flex-none">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
<span className="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Create</span>
</div>
<div className="group flex flex-row items-center">
<div className="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-7 h-7 flex-none">
<path fillRule="evenodd" d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z" clipRule="evenodd" />
</svg>
</div>
<span className="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Notifications</span>
</div>
<div className="group flex flex-row items-center">
<div className="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-7 h-7 flex-none">
<path fillRule="evenodd" d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z" clipRule="evenodd" />
</svg>
</div>
<span className="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Today</span>
</div>
<div className="group flex flex-row items-center">
<div className="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-7 h-7 flex-none">
<path fillRule="evenodd" d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z" clipRule="evenodd" />
</svg>
</div>
<span className="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Upcoming</span>
</div>
<div className="flex flex-none items-center justify-center w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-7 h-7">
<path fillRule="evenodd" d="M19.5 21a3 3 0 003-3V9a3 3 0 00-3-3h-5.379a.75.75 0 01-.53-.22L11.47 3.66A2.25 2.25 0 009.879 3H4.5a3 3 0 00-3 3v12a3 3 0 003 3h15zm-6.75-10.5a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V10.5z" clipRule="evenodd" />
</svg>
</div>
<div className="flex flex-none items-center justify-center w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-7 h-7">
<path fillRule="evenodd" d="M7.502 6h7.128A3.375 3.375 0 0118 9.375v9.375a3 3 0 003-3V6.108c0-1.505-1.125-2.811-2.664-2.94a48.972 48.972 0 00-.673-.05A3 3 0 0015 1.5h-1.5a3 3 0 00-2.663 1.618c-.225.015-.45.032-.673.05C8.662 3.295 7.554 4.542 7.502 6zM13.5 3A1.5 1.5 0 0012 4.5h4.5A1.5 1.5 0 0015 3h-1.5z" clipRule="evenodd" />
<path fillRule="evenodd" d="M3 9.375C3 8.339 3.84 7.5 4.875 7.5h9.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 013 20.625V9.375zm9.586 4.594a.75.75 0 00-1.172-.938l-2.476 3.096-.908-.907a.75.75 0 00-1.06 1.06l1.5 1.5a.75.75 0 001.116-.062l3-3.75z" clipRule="evenodd" />
</svg>
</div>
<div className="flex flex-none items-center justify-center w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-7 h-7">
<path fillRule="evenodd" d="M5.478 5.559A1.5 1.5 0 016.912 4.5H9A.75.75 0 009 3H6.912a3 3 0 00-2.868 2.118l-2.411 7.838a3 3 0 00-.133.882V18a3 3 0 003 3h15a3 3 0 003-3v-4.162c0-.299-.045-.596-.133-.882l-2.412-7.838A3 3 0 0017.088 3H15a.75.75 0 000 1.5h2.088a1.5 1.5 0 011.434 1.059l2.213 7.191H17.89a3 3 0 00-2.684 1.658l-.256.513a1.5 1.5 0 01-1.342.829h-3.218a1.5 1.5 0 01-1.342-.83l-.256-.512a3 3 0 00-2.684-1.658H3.265l2.213-7.191z" clipRule="evenodd" />
<path fillRule="evenodd" d="M12 2.25a.75.75 0 01.75.75v6.44l1.72-1.72a.75.75 0 111.06 1.06l-3 3a.75.75 0 01-1.06 0l-3-3a.75.75 0 011.06-1.06l1.72 1.72V3a.75.75 0 01.75-.75z" clipRule="evenodd" />
</svg>
</div>
</div>
<div className="flex flex-col space-y-2 p-2 items-center">
<div
onClick={() => {
currentTheme == "dark" ? setTheme("light") : setTheme("dark");
}}
className="flex items-center justify-center w-10 h-10 bg-gray-600 text-white rounded-md cursor-pointer hover:bg-gray-50 hover:text-black"
>
{currentTheme == "light" ? (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
<path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
</svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
<path fillRule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clipRule="evenodd" />
</svg>
)}
</div>
</div>
</div>
</div>
</div>
It's just missing a position: relative; on the parent divs :
<div class="group flex flex-row items-center relative">
...
</div>
<div class="h-32 overflow-x-scroll">
<div class="group flex flex-row items-center relative">
<div class="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="w-7 h-7 flex-none">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
<span class="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Create</span>
</div>
<div class="group flex flex-row items-center relative">
<div class="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="w-7 h-7 flex-none">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
<span class="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Create</span>
</div>
<div class="group flex flex-row items-center relative">
<div class="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="w-7 h-7 flex-none">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
<span class="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Create</span>
</div>
<div class="group flex flex-row items-center relative">
<div class="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="w-7 h-7 flex-none">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
<span class="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Create</span>
</div>
<div class="group flex flex-row items-center relative">
<div class="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="w-7 h-7 flex-none">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
<span class="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Create</span>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
I am trying to make add the circles using the Tailwind Grid system. For the 5 option, it works fine but if I add 1 more circle the style collapse. I want to add a new Circle on the start name as None. How can I fix the styling?
Here is the Output:
https://play.tailwindcss.com/sgDu7UoViA
Should be like this:
Code:
.svg {
fill: currentColor;
height: auto;
max-width: 66vmin;
transform-origin: center;
width: 135px;
}
<div class="bg-gray-200 p-4 mt-2 text-black items-center flex grid grid-cols-5 gap-x-4 gap-y-8 sm:grid-cols-5 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8" style="background-color: rgba(255,255,255,.08);">
<div class="relative h-full flex justify-center items-center">
<span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5 "> None </span>
<label class="rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<span aria-hidden="true" class="mt-6 cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9">
<img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full" alt="">
</span>
<input type="radio" name="botanicals" data-id="botanicals" class="sr-only">
</label>
</div>
<div class="relative h-full flex justify-center items-center">
<span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5 "> Rosehip Oil </span>
<label data-id="Rosehip Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute rosehip_recommended_svg" viewBox="0 0 100 100" width="100" height="100" style="z-index: -1;" >
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="11" style="transform: rotate(-55deg); transform-origin: center;">
<textPath xlink:href="#circle" class="text-black versailles">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9">
<img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full" alt="">
</span>
<input type="radio" name="default_oil" data-title="Argan Oil" data-id="default_oil" value="Argan Oil_10" class="sr-only">
</label>
<div class="info_icon oil_info_icon absolute z-9 bottom-0" data-id="Rosehip Oil">
<div class="flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black -mt-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<span class="absolute text-xs sm:text-sm font-medium text-black bottom-0 mt-2"> Smooth </span>
</div>
<div class="relative h-full flex justify-center items-center">
<span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5"> Marula Oil </span>
<label data-id="Marula Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute hidden hidden marula_recommended_svg" viewBox="0 0 100 100" width="100" height="100" style="z-index: -1;" >
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="11" style="transform: rotate(-55deg); transform-origin: center;">
<textPath xlink:href="#circle" class="text-black versailles">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9">
<img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full">
</span>
<input type="radio" name="default_oil" data-title="Marula Oil" data-id="default_oil" value="Marula Oil_10" class="sr-only">
</label>
<div class="info_icon oil_info_icon absolute z-9 bottom-0" data-id="Marula Oil">
<div class="flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black -mt-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<span class="absolute text-xs sm:text-sm font-medium text-black bottom-0"> Smooth </span>
</div>
<div class="relative h-full flex justify-center items-center">
<span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5"> Argan Oil </span>
<label data-id="Argan Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute hidden argan_recommended_svg" viewBox="0 0 100 100" width="100" height="100" style="z-index: -1;" >
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="11" style="transform: rotate(-55deg); transform-origin: center;">
<textPath xlink:href="#circle" class="text-black versailles">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9">
<img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full">
</span>
<input type="radio" name="default_oil" data-title="Argan Oil" data-id="default_oil" value="Argan Oil_10" class="sr-only">
<div class="oil_label_checked_icon absolute inset-x-0 top-0 transform translate-y-px hidden">
<div class="flex justify-center transform -translate-y-1/2">
<svg class=" h-6 w-6 text-green-600 ml-10 mt-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</div>
</div>
</label>
<div class="info_icon oil_info_icon absolute z-9 bottom-0" data-id="Argan Oil">
<div class="flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black -mt-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<span class="absolute text-xs sm:text-sm font-medium text-black bottom-0 mt-2"> Smooth </span>
</div>
<div class="relative h-full flex justify-center items-center">
<span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5"> Jajoba Oil </span>
<label data-id="Jajoba Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute Jajoba_recommended_svg" viewBox="0 0 100 100" width="100" height="100" style="z-index: -1;" >
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="11" style="transform: rotate(-55deg); transform-origin: center;">
<textPath xlink:href="#circle" class="text-black versailles">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9">
<img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full">
</span>
<input type="radio" name="default_oil" data-title="Jajoba Oil" data-id="default_oil" value="Jajoba Oil_10" class="sr-only">
<div class="oil_label_checked_icon absolute inset-x-0 top-0 transform translate-y-px hidden">
<div class="flex justify-center transform -translate-y-1/2">
<svg class=" h-6 w-6 text-green-600 ml-10 mt-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</div>
</div>
</label>
<div class="info_icon oil_info_icon absolute z-9 bottom-0" data-id="Jajoba Oil">
<div class="flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black -mt-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<span class="absolute text-xs sm:text-sm font-medium text-black bottom-0 mt-2"> Smooth </span>
</div>
<div class="relative h-full flex justify-center items-center">
<span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5"> Almond Oil </span>
<label data-id="Almond Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute Almond_recommended_svg" viewBox="0 0 100 100" width="100" height="100" style="z-index: -1;" >
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="11" style=" transform: rotate(-55deg); transform-origin: center;">
<textPath xlink:href="#circle" class="text-black versailles ">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="mt-16 oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9">
<img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full">
</span>
<input type="radio" name="default_oil" data-title="Almond Oil" data-id="default_oil" value="Almond Oil_10" class="sr-only">
<div class="info_icon oil_info_icon z-9" data-id="Almond Oil">
<div class="flex justify-center transform -translate-y-4 ">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black mt-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<span class=" text-xs sm:text-sm font-medium text-black bottom-0 mt-2"> Smooth </span>
</label>
</div>
</div>
Change your code to this. Then let me know.
#media (max-width: 639px) {
.sm\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
<div class="bg-gray-200 p-4 mt-2 text-black items-center grid grid-cols-6 gap-x-4 gap-y-8 sm:grid-cols-6 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8" style="background-color: rgba(255,255,255,.08);">
Whenever I click on my #dropDown button, it functions as intended and opens the dropdown menu; however, the click also hits the underneath which is also clickable. I don't want the button click event to also hit the div underneath, as that is not the intended function.
<ul #postCard *ngFor="let post of posts; let i = index" [class.selected]="getSelected() == i || currPost == post" (click)="setSelected(i)" (click)="setPost(post)" id="jobcard" class="postcard menu px-8 py-4 my-4 mx-4 bg-white border-gray border hover:bg-gray-200 rounded-lg shadow-md dark:bg-gray-800">
<li class="menu-title">
<div class="flex flex-row items-stretch justify-between relative">
<h2 class="text-2xl">{{post.title}}</h2>
<div class="flex flex-col right-0 absolute" [style.display]="'block'">
<h2 id="dateofjob" class="text-lg justify-self-end justify-end justify-items-end block">{{post.date_of_job}}</h2>
</div>
</div>
<div class="flex flex-row relative">
<div>
<h2 class="mt-4 text-lg font-light">Description:</h2>
<p>{{post.care_description}}</p>
</div>
<p id="timeofjob" class="font-light justify-self-end justify-end justify-items-end inline right-0 absolute">Start: {{post.start_time}} | End: {{post.end_time}}</p>
</div>
<div class="flex items-center justify-start w-full">
<div class="relative inline-block w-full">
<button #dropDown (click)="toggleDropdown()" class="dropdownbutton mt-2 relative z-10 block p-2 text-gray-700 bg-white border border-transparent rounded-md dark:text-white focus:border-blue-500 focus:ring-opacity-40 dark:focus:ring-opacity-40 focus:ring-blue-300 dark:focus:ring-blue-400 focus:ring dark:bg-gray-800 focus:outline-none">
<svg class="w-5 h-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div *ngIf="shown" class="absolute left-0 z-20 w-full py-2 mt-2 bg-white rounded-md shadow-xl dark:bg-gray-800">
<h2 class="block px-4 py-3 text-gray-800">Your Application: </h2><a class="block px-4 py-3 text-sm text-gray-800 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"> {{post.applications[0].message}} </a>
</div>
</div>
</div>
</li>
</ul>
It's happening because the event are bubbling, both the clicks on the button and the div get registered. We can tell our function to stop further propagation of the current event by using event.stopPropagation()
In your, capture the $event in your function as a parameter HTML
<button #dropDown (click)="toggleDropdown($event)" class="dropdownbutton mt-2 relative z-10 block p-2 text-gray-700 bg-white border border-transparent rounded-md dark:text-white focus:border-blue-500 focus:ring-opacity-40 dark:focus:ring-opacity-40 focus:ring-blue-300 dark:focus:ring-blue-400 focus:ring dark:bg-gray-800 focus:outline-none">
<svg class="w-5 h-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
and then in your .ts component, use that event to stop further bubbling of events, so that the div click won't be called:
toggleDropdown($event: Event):void {
$event.stopPropagation();
}
try using stopPropagation in the click function.
check out this link for more details:
https://www.freecodecamp.org/news/a-simplified-explanation-of-event-propagation-in-javascript-f9de7961a06e/
I came across the BetterDev sidebar in which, If we add content to it, the sidebar also scrolls. Is there a way to make that sidebar fixed and not scrollable? I tried sticky, corrected with top-0 and left-0, but it didn't work.
<div class="relative min-h-screen md:flex">
<!-- mobile menu bar -->
<div class="bg-gray-800 text-gray-100 flex justify-between md:hidden">
<!-- logo -->
Better Dev
<!-- mobile menu button -->
<button class="mobile-menu-button p-4 focus:outline-none focus:bg-gray-700">
<svg class="h-5 w-5" 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="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<!-- sidebar -->
<div class="sidebar bg-blue-800 text-blue-100 w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out">
<!-- logo -->
<a href="#" class="text-white flex items-center space-x-2 px-4">
<svg class="w-8 h-8" 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="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
</svg>
<span class="text-2xl font-extrabold">Better Dev</span>
</a>
<!-- nav -->
<nav>
<a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white">
Home
</a>
<a href="" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white">
About
</a>
<a href="" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white">
Features
</a>
<a href="" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white">
Pricing
</a>
</nav>
</div>
<!-- content -->
<div class="flex-1 p-10 text-2xl font-bold">
content goes here
</div>
</div>
Codepen Link of the above code
position:fixed;
left:0px;
a example could be: https://www.w3schools.com/howto/howto_css_fixed_menu.asp
shows a navbar in top but as you can see:
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
All you need to change is from top to left!
if it doesn't works, it could be the body position type, but in that i cannot help u bud.
I'm trying to get two versions of the navbar - one LTR and the other is RTL.
For that I am adding flex-row-reverse to the two necessary divs, but the space between the logo and the search bar disappears.
This is the LTR navbar without flex-row-reverse:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<nav
class="bg-gray-900 text-white px-4 py-3 flex items-center justify-between"
>
<div class="flex items-center space-x-4">
<a href="#" class="text-white hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
</a>
<div class="lg:block relative">
<input
type="text"
class="rounded bg-gray-700 placeholder-white w-72 px-3 py-1"
placeholder="Search or jump to..."
/>
<div class="absolute top-0 right-0 flex items-center h-full">
<div
class="
border border-gray-600
rounded
text-xs text-gray-400
px-2
mr-2
"
>
/
</div>
</div>
</div>
</div>
</nav>
And this is the broken RTL version with no spacing between the logo and the search bar (when using flex-row-reverse):
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<nav
class="bg-gray-900 text-white px-4 py-3 flex flex-row-reverse items-center justify-between"
>
<div class="flex flex-row-reverse items-center space-x-4">
<a href="#" class="text-white hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
</a>
<div class="lg:block relative">
<input
type="text"
class="rounded bg-gray-700 placeholder-white w-72 px-3 py-1"
placeholder="Search or jump to..."
/>
<div class="absolute top-0 right-0 flex items-center h-full">
<div
class="
border border-gray-600
rounded
text-xs text-gray-400
px-2
mr-2
"
>
/
</div>
</div>
</div>
</div>
</nav>
According to tailwind documentation, reference link
If your elements are in reverse order (using say flex-row-reverse or
flex-col-reverse), use the space-x-reverse or space-y-reverse
utilities to ensure the space is added to the correct side of each
element.
So just add the class space-x-reverse in your code like this: Demo
<div class="flex flex-row-reverse items-center space-x-4 space-x-reverse">