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>
Related
I have built a file upload in html but clicking the html element doesn't show up the upload dialog, have no idea why is it?
<div class="flex flex-col my-1">
<div tabindex="0" class="dropzone cursor-pointer focus-within:ring-2 flex flex-col justify-center items-center text-center rounded-lg w-full mt-4">
<input accept="image/bmp,image/gif,image/heic,image/jpeg,image/png,image/svg+xml,image/webp" type="file" autocomplete="off" tabindex="-1" style="display: none;">
<div class="bg-brand rounded-lg focus:outline-none focus:shadow-none flex w-full p-2 h-full">
<div class="p-8 focus:outline-none focus:shadow-none relative p-3 focus:outline-none focus:shadow-none border-2 border-dashed w-full flex flex-col justify-center items-center rounded-lg text-xs border-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="mb-4" width="36" height="36" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="15" y1="8" x2="15.01" y2="8"></line>
<rect x="4" y="4" width="16" height="16" rx="3"></rect>
<path d="M4 15l4 -4a3 5 0 0 1 3 0l5 5"></path>
<path d="M14 14l1 -1a3 5 0 0 1 3 0l2 2"></path>
</svg>
<span>Drag and drop an image or click to upload</span>
<div aria-hidden="true" class="whitespace-nowrap overflow-hidden text-sm invisible h-0">Drag and drop an image or click to upload</div>
</div>
</div>
</div>
</div>
You can associate a label with an input elsewhere in the code, by assigning an id to the input tag, and referencing that id in the for attribute of the label. Or you can wrap an input tag with the label element, and it will do the same
For eg:
<input id="fileUpload" style="display:none">
...
...
Some Code
...
...
<label for="fileUpload">Upload File</label>
In your case, you can opt for the second option. Instead of wrapping the hidden input element in a div element wrap it in a label element. That will allow you to trigger the input inside the label when any point in the label is clicked.
<div class="flex flex-col my-1">
<!-- Changed this from div to label. Also added a style of cursor:pointer -->
<label tabindex="0" class="dropzone cursor-pointer focus-within:ring-2 flex flex-col justify-center items-center text-center rounded-lg w-full mt-4" style="cursor:pointer">
<input accept="image/bmp,image/gif,image/heic,image/jpeg,image/png,image/svg+xml,image/webp" type="file" autocomplete="off" tabindex="-1" style="display: none;">
<div class="bg-brand rounded-lg focus:outline-none focus:shadow-none flex w-full p-2 h-full">
<div class="p-8 focus:outline-none focus:shadow-none relative p-3 focus:outline-none focus:shadow-none border-2 border-dashed w-full flex flex-col justify-center items-center rounded-lg text-xs border-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="mb-4" width="36" height="36" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="15" y1="8" x2="15.01" y2="8"></line>
<rect x="4" y="4" width="16" height="16" rx="3"></rect>
<path d="M4 15l4 -4a3 5 0 0 1 3 0l5 5"></path>
<path d="M14 14l1 -1a3 5 0 0 1 3 0l2 2"></path>
</svg>
<span>Drag and drop an image or click to upload</span>
<div aria-hidden="true" class="whitespace-nowrap overflow-hidden text-sm invisible h-0">Drag and drop an image or click to upload</div>
</div>
</div>
</label>
</div>
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>
function App() {
return (
<div>
<div className="flex flex-col ">
<div className="bg-blue-400 h-16"></div>
<div className="flex flex-row items-stretch h-max ">
<div className ="basis-3/4 bg-red-600"><Mainscreen/></div>
<div className= "basis-1/4 bg-black text-white" ><Mainscreen/></div>
</div>
</div>
</div>
);
}
I am trying to make a UI where there is a top banner, and then a section at the bottom which fits the max size of the screen, and will scroll with enough content. I am running into the problem that without any content, the flex boxes will not even display at all. The only way that I can get them to show a proper height is if I hardcode the height.
This is how I would like the page to look, without resorting to using h-screen
You can use h-full. This will allow you take the space that the content have. You can see below example for that.
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col">
<div class="h-16 bg-blue-400"></div>
<div class="flex flex-row items-stretch">
<div class="h-full basis-3/4 bg-red-200">
<section class="body-font relative text-gray-600">
<div class="container mx-auto px-5 py-24">
<div class="mb-12 flex w-full flex-col text-center">
<h1 class="title-font mb-4 text-2xl font-medium text-gray-900 sm:text-3xl">Contact Us</h1>
<p class="mx-auto text-base leading-relaxed lg:w-2/3">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify.</p>
</div>
<div class="mx-auto md:w-2/3 lg:w-1/2">
<div class="-m-2 flex flex-wrap">
<div class="w-1/2 p-2">
<div class="relative">
<label for="name" class="text-sm leading-7 text-gray-600">Name</label>
<input type="text" id="name" name="name" class="w-full rounded border border-gray-300 bg-gray-100 bg-opacity-50 py-1 px-3 text-base leading-8 text-gray-700 outline-none transition-colors duration-200 ease-in-out focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200" />
</div>
</div>
<div class="w-1/2 p-2">
<div class="relative">
<label for="email" class="text-sm leading-7 text-gray-600">Email</label>
<input type="email" id="email" name="email" class="w-full rounded border border-gray-300 bg-gray-100 bg-opacity-50 py-1 px-3 text-base leading-8 text-gray-700 outline-none transition-colors duration-200 ease-in-out focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200" />
</div>
</div>
<div class="w-full p-2">
<div class="relative">
<label for="message" class="text-sm leading-7 text-gray-600">Message</label>
<textarea id="message" name="message" class="h-32 w-full resize-none rounded border border-gray-300 bg-gray-100 bg-opacity-50 py-1 px-3 text-base leading-6 text-gray-700 outline-none transition-colors duration-200 ease-in-out focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200"></textarea>
</div>
</div>
<div class="w-full p-2">
<button class="mx-auto flex rounded border-0 bg-indigo-500 py-2 px-8 text-lg text-white hover:bg-indigo-600 focus:outline-none">Button</button>
</div>
<div class="mt-8 w-full border-t border-gray-200 p-2 pt-8 text-center">
<a class="text-indigo-500">example#email.com</a>
<p class="my-5 leading-normal">49 Smith St. <br />Saint Cloud, MN 56301</p>
<span class="inline-flex">
<a class="text-gray-500">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-5 w-5" viewBox="0 0 24 24">
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg>
</a>
<a class="ml-4 text-gray-500">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-5 w-5" viewBox="0 0 24 24">
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
</svg>
</a>
<a class="ml-4 text-gray-500">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-5 w-5" viewBox="0 0 24 24">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
</svg>
</a>
<a class="ml-4 text-gray-500">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-5 w-5" viewBox="0 0 24 24">
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
</svg>
</a>
</span>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="h-full basis-1/4 bg-black text-white">
<section class="body-font text-gray-600">
<div class="container mx-auto flex flex-wrap px-5 py-24">
<div class="flex w-full flex-wrap">
<div class="md:w-1/2 md:py-6 md:pr-10 lg:w-2/5">
<div class="relative flex pb-12">
<div class="absolute inset-0 flex h-full w-10 items-center justify-center">
<div class="pointer-events-none h-full w-1 bg-gray-200"></div>
</div>
<div class="relative z-10 inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-indigo-500 text-white">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-5 w-5" viewBox="0 0 24 24">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
</svg>
</div>
<div class="flex-grow pl-4">
<h2 class="title-font mb-1 text-sm font-medium tracking-wider text-gray-900">STEP 1</h2>
<p class="leading-relaxed">VHS cornhole pop-up, try-hard 8-bit iceland helvetica. Kinfolk bespoke try-hard cliche palo santo offal.</p>
</div>
</div>
<div class="relative flex pb-12">
<div class="absolute inset-0 flex h-full w-10 items-center justify-center">
<div class="pointer-events-none h-full w-1 bg-gray-200"></div>
</div>
<div class="relative z-10 inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-indigo-500 text-white">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-5 w-5" viewBox="0 0 24 24">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
<div class="flex-grow pl-4">
<h2 class="title-font mb-1 text-sm font-medium tracking-wider text-gray-900">STEP 2</h2>
<p class="leading-relaxed">Vice migas literally kitsch +1 pok pok. Truffaut hot chicken slow-carb health goth, vape typewriter.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
However you can use the h-screen to use the full space irrespective of the length of the content .
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);">
I am building a data-table using tailwindcss the functionality works fine but I have a small issue that the sorting icon (asc, desc) is appearing on top of the action popup:
HTML code for bulk action:
<div x-show="open" x-description="Dropdown panel, show/hide based on dropdown state." x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute mt-2 origin-top-right right-0 rounded-md shadow-lg w-56">
<div class="rounded-md bg-white shadow-xs" style="
z-index: 100;
">
<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<button type="button" class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 flex items-center space-x-2" wire:click="exportSelected" role="menuitem">
<svg class="inline-block w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
<span>Export</span>
</button>
<button type="button" class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 flex items-center space-x-2" wire:click="showDeleteModal()" role="menuitem">
<svg class="inline-block w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
<span>Delete</span>
</button>
</div>
</div>
</div>
The status html code:
<button wire:click="sortBy('status')" class="flex items-center space-x-1 text-left text-xs leading-4 font-medium text-cool-gray-500 uppercase tracking-wider group focus:outline-none focus:underline">
<span>Status</span>
<span class="relative flex items-center">
<svg class="w-3 h-3 group-hover:opacity-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
</svg>
<svg class="w-3 h-3 opacity-0 group-hover:opacity-100 absolute" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</span>
</button>
I tried to use z-index but didn't work.
Please advice,
This sure does appear to be a z-index issue. When you inspect using the browser dev console look for z-index declarations on the icon and the menu.
Try adding class z-0 (Tailwind z-index) to this line:
<button wire:click="sortBy('status')" class="flex items-center space-x-1 text-left text-xs leading-4 font-medium text-cool-gray-500 uppercase tracking-wider group focus:outline-none focus:underline">
After adding z-0:
<button wire:click="sortBy('status')" class="z-0 flex items-center space-x-1 text-left text-xs leading-4 font-medium text-cool-gray-500 uppercase tracking-wider group focus:outline-none focus:underline">
You can also try adding z-50 to the menu like this (way at the end):
<div x-show="open" x-description="Dropdown panel, show/hide based on dropdown state." x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute mt-2 origin-top-right right-0 rounded-md shadow-lg w-56 z-50">