Just trying to use h-40 class but not working
<div class="flex min-h-screen bg-cover max-w-screen-3xl" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/8/88/Harlingen._Sint-Micha%C3%ABlkerk._Hoofdaltaar._HDR._12-07-2021._%28d.j.b%29_02.jpg);">
<!-- wrapper App-->
<div class="bg-slate-700/60 absolute flex flex-row inset-0 m-5 rounded-xl max-w-screen-2xl">
<!-- Left menu section -->
<div class="bg-zinc-800/90 p-5 w-16 rounded-tl-xl rounded-bl-xl"></div>
<!-- Wrapper Main -->
<div class="flex flex-col w-full overflow-auto">
<!-- Top section -->
<div class="bg-red-400/90 h-40 w-auto rounded-tr-xl p-5 sticky top-0"></div>
<!-- wrapper body -->
<div class="flex flex-col md:flex-row">
<!-- body -->
<div class="bg-green-400/90 border-2 w-full h-60 p-5"></div>
<div class="bg-green-400/90 border-2 w-full h-96 p-5"></div>
</div>
</div>
</div>
</div>
https://play.tailwindcss.com/gryfZM2drD
I just need to add class shrink-0 :-)
Related
I am struggeling while trying to center my content vertical and horizontal within a nested div with tailwindcss.
<div class="flex flex-col items-center min-h-screen">
<header class="flex-none text-center w-full">
<p>Header</p>
</header>
<div class="grow w-full">
<div id="home" class="flex justify-center item-center min-h-max">
<main>
<p>Shall be vertical and horizontal center.</p>
</main>
</div>
</div>
<footer class="flex-none text-center m-2 w-full">
<hr class="mx-auto mb-2 sm:w-56 w-36 h-0.5 bg-gray-100 rounded border-0 shadow-2xl" />
<div class="flex sm:flex-row flex-col sm:gap-4 gap-1 justify-center text-sm font-light">
<p>Footer<p>
</div>
</footer>
</div>
The code is also wrapped up here: https://play.tailwindcss.com/5B2w0RGQzm?size=540x1014
I already tried different height and min-height classes, but I am still failing...
https://tailwindcss.com/docs/height
https://tailwindcss.com/docs/min-height
What is the right approach to align everything centered?
try to dispatch your class otherwise and allow yourself to set flex (#child) into flex (from parent) , so it respects your idea and uses flex grid properties through your DOM levels.
Possible example below if i understood your issue:
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col items-center min-h-screen" style="">
<header class="flex-none text-center w-full">
<p>Header</p>
</header>
<div class="flex flex-column grow w-full justify-center items-center">
<div id="home">
<main>
<p>Shall be vertical and horizontal center.</p>
</main>
</div>
</div>
<footer class="flex-none text-center m-2 w-full">
<hr class="mx-auto mb-2 sm:w-56 w-36 h-0.5 bg-gray-100 rounded border-0 shadow-2xl" />
<div class="flex sm:flex-row flex-col sm:gap-4 gap-1 justify-center text-sm font-light">
<p>Footer at bottom <p>
</div>
</footer>
</div>
other possible example:
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col items-center min-h-screen" style="">
<header class="flex-none text-center w-full">
<p>Header</p>
</header>
<div class="flex grow ">
<div id="home" class="flex grow ">
<main class="flex flex-column grow w-full justify-center items-center">
<p>Shall be vertical and horizontal center.</p>
</main>
</div>
</div>
<footer class="flex-none text-center m-2 w-full">
<hr class="mx-auto mb-2 sm:w-56 w-36 h-0.5 bg-gray-100 rounded border-0 shadow-2xl" />
<div class="flex sm:flex-row flex-col sm:gap-4 gap-1 justify-center text-sm font-light">
<p>Footer at bottom
<p>
</div>
</footer>
</div>
Is there a way to achieve a grid of unequal column heights (based on content in each div) using TailWindCSS ?
One way is to use flex to create a grid of unequal heights within the same column.
Please use full page view to see below code.
<script src="https://cdn.tailwindcss.com"></script>
<div class="container m-auto p-4">
<div class="flex flex-row space-x-4">
<!-- First Col -->
<div class="flex w-full flex-col space-y-4 bg-red-200">
<div class="h-40 rounded-lg bg-red-500"></div>
<div class="h-32 rounded-lg bg-red-500"></div>
<div class="h-60 rounded-lg bg-red-500"></div>
</div>
<!-- Sec Col -->
<div class="flex w-full flex-col space-y-4 bg-blue-200">
<div class="h-12 rounded-lg bg-blue-500"></div>
<div class="h-72 rounded-lg bg-blue-500"></div>
<div class="h-48 rounded-lg bg-blue-500"></div>
</div>
<!-- Third Col -->
<div class="flex w-full flex-col space-y-4 bg-green-200">
<div class="h-28 rounded-lg bg-green-500"></div>
<div class="h-40 rounded-lg bg-green-500"></div>
<div class="h-64 rounded-lg bg-green-500"></div>
</div>
</div>
</div>
I'm building a laravel/tailwind dashboard but I'm now facing an issue with the overflow of an element.
The design I want to achieve is the follwing :
And what i achieved until now is the following:
With this code structure :
<body>
<div id="app" class="max-h-screen flex flex-col">
<nav class="bg-white border-gray-200 flex flex-wrap h-fit justify-between shadow items-center p-0 m-0">
</nav>
<div class="flex max-h-full grid grid-cols-8">
<aside class="h-full flex col-span-1" aria-label="Sidebar" id="sidebar">
</aside>
<div class="w-full bg-gray-100 p-5 col-span-7 flex-1 m-0">
</div>
</div>
</div>
</body>
The issue
I would like to have only the body as scrollable ans keep the sidebar and the navbar in the same fixed position they are at any time.
Unfortunately, when i add the overflow-y-auto class to the div where the body is, the overflow is applied to the whole window breaking the design.
Do you have any suggestion on how i can make only the body scrollable with the above code base?
Thank you
Method 1: using fixed classes
Idea : make the nav and aside elements fixed
<body>
<div id="app" class="h-screen flex flex-col">
<nav class="bg-white border-gray-200 flex flex-wrap h-fit justify-between shadow items-center p-0 m-0 w-full fixed top-0 left-0 z-10">
</nav>
<aside class="h-screen fixed top-0 left-0 w-60 flex col-span-1" aria-label="Sidebar" id="sidebar">
</aside>
<div class="w-4/5 ml-auto bg-gray-100 p-5 col-span-7 flex-1 overflow-y">
</div>
</div>
</body>
Method 2: using sticky class
<body>
<div id="app" class="max-h-screen flex flex-col">
<nav class="bg-white border-gray-200 flex flex-wrap h-fit justify-between shadow items-center p-0 m-0 w-full fixed top-0 left-0 z-10">
</nav>
<div class="flex max-h-full grid grid-cols-8 relative h-screen overflow-hidden">
<aside class="h-screen flex col-span-1 sticky top-0" aria-label="Sidebar" id="sidebar">
</aside>
<div class="w-full overflow-auto bg-gray-100 p-5 col-span-7 flex-1 m-0">
</div>
</div>
</div>
</body>
You might have to experiment with the div widths as I am just roughly eyeballing the values with w-4/5 and w-60 classes.
I'm having trouble getting the right, "Scroll independently", div, to scroll independently of its sibling div to its left. I would like to be able to do this without changing anything outside of the <!-- CONTENT START --> <!-- CONTENT END --> comments. It seems to be close, but I'm stuck. The "Scroll" and "Scroll independently" div's always scroll together. I'm running this in https://play.tailwindcss.com/
Any help would be greatly appreciated.
<div class="flex bg-gray-100 justify-center">
<div class="flex flex-col w-full max-w-5xl pb-7">
<nav class="sticky top-0 flex items-center justify-between bg-gray-700 text-white h-16 z-40 p-2">
<div class="flex w-1/3">
{Left}
</div>
<div class="flex justify-center w-1/3">
{Middle}
</div>
<div class="flex justify-end items-center w-1/3 gap-2">
{Right}
</div>
</nav>
<!-- CONTENT START -->
<div class="flex">
<div class="w-2/3">
<div class="sticky top-16 w-full h-20 mb-2 bg-green-500">
Don't scroll
</div>
<div class="w-full h-96 mb-2 bg-red-500">
Scroll
</div>
</div>
<div class="w-1/3 mb-2 h-[1000px] bg-pink-400">
Scroll independently
</div>
</div>
<!-- CONTENT END -->
<footer class="fixed inset-x-0 bottom-0 z-50 bg-gray-700 h-7">
<div class="flex items-center justify-end px-8 pt-1">
<div class="text-sm text-white">{versionStr}</div>
</div>
</footer>
</div>
</div>
This cleaned it up nicely:
https://play.tailwindcss.com/Dbd5vnExhk
<div class="flex bg-gray-100 justify-center">
<div class="flex flex-col w-full max-w-5xl pb-7">
<nav class="sticky top-0 flex items-center justify-between bg-gray-700 text-white h-16 z-40 p-2">
<div class="flex w-1/3">
{Left}
</div>
<div class="flex justify-center w-1/3">
{Middle}
</div>
<div class="flex justify-end items-center w-1/3 gap-2">
{Right}
</div>
</nav>
<!-- CONTENT START -->
<div class="flex">
<div class="w-2/3">
<div class="sticky top-16 w-full h-20 bg-green-500">
Don't scroll
</div>
<div class="w-full h-[2000px] bg-gradient-to-b from-red-300 to-red-800">
Scroll
</div>
</div>
<div class="w-1/3 h-[calc(100vh-5.75rem)] sticky top-16 overflow-y-scroll overscroll-contain bg-pink-400">
<div class="h-[1000px]">
Scroll independently
</div>
</div>
</div>
<!-- CONTENT END -->
<footer class="fixed inset-x-0 bottom-0 z-50 bg-gray-700 h-7">
<div class="flex items-center justify-end px-8 pt-1">
<div class="text-sm text-white">{versionStr}</div>
</div>
</footer>
</div>
</div>
I have a dashboard layout with a sidebar on the left, I would like some content right of the sidebar in a grid layout with 3 items
So far I have the dashboard
<div>
<div>
<div class=" flex flex-col inset-y-0 left-0 z-30 overflow-y-auto transition duration-300 transform bg-white w-60 dark:bg-gray-900 lg:translate-x-0 lg:static lg:inset-0">
<div class="flex items-center justify-center mt-8">
<div class="flex items-center">
<span class="text-2xl font-semibold text-gray-800 dark:text-white">Dashboard</span>
</div>
</div>
<nav class="flex flex-col px-4 mt-10 text-center">
Overview
Tickets
Ideas
Contacts
Settings
</nav>
</div>
<!-- the items i want to put in a 3 grid layout !-->
<div class="flex flex-wrap -mx-3 overflow-hidden sm:-mx-1 md:-mx-1 lg:-mx-2 xl:-mx-2">
<div class="my-3 px-3 w-1/3 overflow-hidden sm:my-1 sm:px-1 sm:w-full md:my-1 md:px-1 md:w-1/2 lg:my-2 lg:px-2 lg:w-1/3 xl:my-2 xl:px-2 xl:w-1/3">
#livewire('dashboard')
</div>
</div>
</div>
</div>
I tried a lot of things, most of them ended up with the dashboard covering up the images, now my images are always in the same column as the dashboard instead of centering in the middle liek they should.
See the image for a clearer picture
I created a demo for you.
<div class="flex">
<div class="flex w-60 bg-gray-200 h-96"></div>
<div class="flex flex-1 bg-blue-50">
<div class="grid grid-cols-3 gap-4">
<div class="col-span-1 bg-blue-200 w-48"></div>
<div class="col-span-1 bg-blue-200 w-48"></div>
<div class="col-span-1 bg-blue-200 w-48"></div>
<div class="col-span-1 bg-blue-200 w-48"></div>
</div>
</div>
</div>
Also, I recommend going through YouTube videos from Andre Madarang. He has some great content on Tailwind.
Similar to Digvjay, I put a demo together.
I used a fair bit of your original markup if that makes it easier to follow.
<div class="flex mt-8">
<!-- sidebar -->
<div class="flex flex-col w-60 dark:bg-gray-900">
<div class="flex items-center justify-center ">
<div class="flex items-center">
<span class="text-2xl font-semibold text-gray-800 dark:text-white">Dashboard</span>
</div>
</div>
<nav class="flex flex-col px-4 mt-10 text-center">
Overview
Tickets
Ideas
Contacts
Settings
</nav>
</div>
<!-- the items i want to put in a 3 grid layout !-->
<div class="p-4 grid grid-cols-3 gap-4 bg-gray-50 w-full">
<div class="bg-red-500 w-full"></div>
<div class="bg-red-500 w-full"></div>
<div class="bg-red-500 w-full"></div>
<div class="bg-red-500 w-full"></div>
</div>
</div>