So I'm new to tailwind and i am creating a simple app/layout which has a Navbar, Image Feed and Sidebar component.
So on the left side component it has a grid of images and I want it to be a scrollable.
My issues is overflow-y-auto doesnt work unless I add a fixed height like h-96 in the Image Feed component
Here is the tailwind code example I'm working on:
code snippet
<div class="flex h-screen w-screen bg-blue-400">
<div class="flex flex-auto flex-col">
<div class="flex items-center space-x-3 p-4 text-white">
<div class="flex">
<button class="text-royal-blue h-12 w-12 rounded-full bg-white text-xl"></button>
</div>
<div class="text-2xl">NAVBAR</div>
</div>
<div class="flex flex-row bg-red-200 flex-auto">
<div class="flex flex-auto overflow-y-auto">
<div class="grid w-full grid-cols-2 gap-2">
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
</div>
</div>
<div class="w-1/4 bg-green-300">SIDEBAR</div>
</div>
</div>
</div>
Okay so try this snippet. You need to set height of the image feed container to h-screen and hide the overflow of the top level division.
<div class="flex h-screen w-screen overflow-y-hidden bg-blue-400">
<div class="flex flex-auto flex-col">
<div class="flex items-center space-x-3 p-4 text-white">
<div class="flex">
<button class="text-royal-blue h-12 w-12 rounded-full bg-white text-xl"></button>
</div>
<div class="text-2xl">NAVBAR</div>
</div>
<div class="flex flex-auto flex-row bg-red-200">
<div class="flex h-screen flex-auto overflow-y-auto">
<div class="grid w-full grid-cols-2 gap-2">
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
</div>
</div>
<div class="w-1/4 bg-green-300">SIDEBAR</div>
</div>
</div>
</div>
Related
Hi I'm designing a grid system in NextJS using Tailwind.
I'm having trouble auto sizing the grids to fit the size of the parent element.
Below are two images to help convey my meaning.
Mockup wireframe of the container and grids. (Red = Wrapper, Pink = Layout, Purple = Grids)
What I've managed to code, (I want to resize the right hand boxes to the height of the window.)
<div className="bg-white dark:bg-custom05 md:fixed md:inset-y-0 md:left-0 md:flex md:items-start md:overflow-y-auto md:w-full ">
<div className="min-h-full md:flex md:w-16 md:flex-none md:items-center md:whitespace-nowrap md:py-12 md:leading-7 md:[writing-mode:vertical-rl]">
<div className="flex justify-between text-sm gap-12">
<div className="sm:w-14 sm:h-14 md:w-14 md:h-14 rounded-lg flex items-center justify-center bg-custom03 order-1">Avatar</div>
<div className="sm:w-60 sm:h-14 md:w-14 md:h-60 rounded-lg flex items-center justify-center bg-custom03 order-2">Author Tag Line</div>
<div className="sm:w-14 sm:h-14 md:w-14 md:h-14 rounded-lg flex items-center justify-center bg-custom03 order-3">03</div>
</div>
</div>
<div className="bg-white dark:bg-custom06 relative z-10 mx-auto p-10 md:max-w-md md:min-h-full md:flex-auto md:border-x md:border-custom07">
<div className="grid grid-row-3 grid-flow-row gap-12 text-sm text-center rounded-lg ">
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-6">01</div>
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-6">02</div>
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-6">03</div>
</div>
</div>
<div className="bg-white dark:bg-custom05 relative z-9 p-10 mx-auto md:max-h-full md:flex-auto ">
<div className="grid grid-col-2 grid-flow-col gap-12 text-sm text-center rounded-lg ">
<div className="p-4 rounded-lg bg-custom03 grid place-content-center col-span-2">01</div>
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-2 col-span-2">02</div>
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-3">03</div>
</div>
</div>
</div>
Answer Result & Refactor
Thanks to MagnusEffect's help I've been able solve the problem.
Ended up changing some of his styling and made sure to set the padding, gaps and other minor changes, hover its worked fantasticly!
You can use the flex properties to create the following grid systems like this.
<script src="https://cdn.tailwindcss.com"></script>
<div class=" border-red-600 border-2 p-3 flex flex-row items-center space-x-2">
<div class=" p-4 border-pink-500 border-2 h-screen space-y-2 items-center w-1/12 flex flex-col">
<div class=" border-purple-500 border-2 h-20 ">Av</div>
<div class=" border-purple-500 border-2 h-72">ot</div>
</div>
<div class=" p-4 border-pink-500 border-2 h-screen w-4/12 flex flex-col space-y-2">
<div class="p-3 border-purple-500 border-2 h-48">Video</div>
<div class="p-3 border-purple-500 border-2 h-24">Description</div>
<div class="p-3 border-purple-500 border-2 h-48">Github, Socials</div>
</div>
<div class=" p-4 border-pink-500 border-2 h-screen w-7/12 space-x-4 flex flex-row items-center">
<div class="flex flex-col space-y-2 w-1/2 h-full">
<div class="border-purple-500 border-2 h-full p-4">Projects</div>
<div class="border-purple-500 border-2 h-full p-4">Empty </div>
</div>
<div class="p-6 border-purple-500 border-2 w-1/2 h-full ">
Study/Work
</div>
</div>
</div>
Note:
Replace class= with className= in Reactjs.
View the demo in fullPage
Try h-screen or h-fit or you can add custom sizing h-[] in the square brackets you can add any sizing (px, vh) etc.
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'm having a difficulty in making the border radius on the line below the text and I also have a problem on how to put a spacing between the text and the bottom line.
This is my expected output
Expected Output -> https://ibb.co/RSKytWm
Codepen -> Codepen
code
<div class="
min-h-screen
flex
items-center
justify-center
py-4
px-4
sm:px-6
lg:px-6
bg-black
">
<div class="max-w-lg w-full space-y-8">
<div class="flex flex-col w-full px-4 py-4 sm:px-6 md:px-8">
<div class="flex flex-row justify-center">
<button class="
inline-flex
items-end
justify-center
h-20
w-28
text-white
font-regular
border-b-4 border-white
rounded-3xl
">
Personal Details
</button>
<button class="
inline-flex
items-end
justify-center
h-20
w-28
text-white
font-regular
border-b-4 border-white
rounded-3xl
mr-10
ml-10
">
Contact Details
</button>
<button class="
inline-flex
items-end
justify-center
h-20
w-28
text-white
font-regular
border-b-4 border-white
rounded-3xl
">
Other Details
</button>
</div>
</div>
</div>
</div>
Update:
After a long discussion with the OP, the OP has noticed that the upper side is not curved (I didn't notice anyway), as below:
Even adding rounded-t-sm won't solve it, since this is not possible to solve because we are adding bottom-border to the button, the only way to solve is to remove the bottom-border and add <hr> and style it to look like line.
Updated code:
<div class="min-h-screen flex items-center justify-center py-4 px-4 sm:px-6 lg:px-6 bg-black">
<div class="max-w-lg w-full space-y-8">
<div class="flex flex-col w-full px-4 py-4 sm:px-6 md:px-8">
<div class="flex flex-row justify-center">
<button class="inline-flex flex-col items-end justify-center h-50 w-50 rounded-sm text-white font-regular">
Personal Details
<hr class="w-full border-white rounded-md border-2 mt-2" />
</button>
<button class="inline-flex flex-col items-end justify-center h-50 w-50 rounded-sm text-white font-regular mr-10 ml-10">
Contact Details
<hr class="w-full border-white rounded-md border-2 mt-2" />
</button>
<button class="inline-flex flex-col items-end justify-center h-50 w-50 rounded-sm text-white font-regular">
Other Details
<hr class="w-full border-white rounded-md border-2 mt-2" />
</button>
</div>
</div>
</div>
</div>
Updated result:
Playground
Old answer
Not sure what is the difficulty that you have in adding border-radius, try adding rounded-sm and it will work.
If you want to add some space between the text and line, try adding some padding on the button, I think that py-2 will fit your needs.
Code:
<div class="min-h-screen flex items-center justify-center py-4 px-4 sm:px-6 lg:px-6 bg-black">
<div class="max-w-lg w-full space-y-8">
<div class="flex flex-col w-full px-4 py-4 sm:px-6 md:px-8">
<div class="flex flex-row justify-center">
<button class="inline-flex items-end justify-center h-50 w-50 py-2 rounded-sm text-white font-regular border-b-4 border-white">
Personal Details
</button>
<button class="inline-flex items-end justify-center h-50 w-50 py-2 rounded-sm text-white font-regular border-b-4 border-white mr-10 ml-10">
Contact Details
</button>
<button class="inline-flex items-end justify-center h-50 w-50 py-2 rounded-sm text-white font-regular border-b-4 border-white">
Other Details
</button>
</div>
</div>
</div>
</div>
Result:
Playground
I'm using Tailwind CSS in VueJS and I have a little issue with my DIVs. I'm not used to CSS frameworks and I never encountered this problem before.
Problem : https://i.ibb.co/XWbdsxT/screenshot.png
As you can see on this screenshot, the red div goes beyond the bottom of the page (which is normal). I would like the dark-gray one and the light-gray one to strech and follow the red to the very bottom.
I tried :
Add h-full or/and h-screen classes to the gray divs
Add h-full or and h-screen classes to the body and/or html
Add these classes to the main parent div (the one where the grays are wrapped)
It doesn't seem to have any effect. Am I doing this wrong ? Here is the code :
<template>
<div class="hello">
<div class="flex flex-row">
<div class="w-1/5 h-screen bg-darkgray"></div>
<div class="w-4/5 h-screen bg-gray-200">
<div class="w-full h-16">
<div>
<div class="bg-white flex items-center shadow-xl">
<input class="w-full py-4 px-6 text-gray-700 leading-tight focus:outline-none" id="search" type="text" placeholder="Search an article">
<div class="p-4 flex flex-column">
<div class="border-r-2 w-16">
<button class="text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
<img src="../assets/search_icon.png"/>
</button>
</div>
<div class="flex flex-column">
<button class="ml-3 text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
<img src="../assets/notifications.png"/>
</button>
<button class="ml-3 text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
<img src="../assets/user.png"/>
</button>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="flex flex-row w-11/12 h-16 mt-20 m-auto justify-between">
<p class="text-3xl font-bold">Dashboard</p>
<button class="bg-orange hover:bg-darkgray text-white font-bold h-12 px-4 rounded-xl justify-end" type="button">
<span class="mr-2">+</span> Create an article
</button>
</div>
<div class="flex flex-row w-11/12 h-16 mt-4 m-auto bg-white rounded-t-2xl justify-between">
<div class="ml-6 mt-5">
<a class="text-orange font-bold">HIGHLIGHTS ARTICLES</a>
</div>
<div class="flex justify-end ml-6 mt-5 mr-6 space-x-4">
<div id="1" class="selected cursor-pointer"><a class="item-selected font-bold">Recently updated</a></div>
<div id="2" class="cursor-pointer"><a class="item font-bold">Recently seen</a></div>
<div id="3" class="cursor-pointer"><a class="item font-bold">Created by me</a></div>
</div>
</div>
<div class="flex w-11/12 h-5xl mt-0.5 bg-red-500 m-auto rounded-b-2xl"></div>
</div>
</div>
</div>
</div>
</template>
Please don't pay attention to the fact that this is not responsive. It is not supposed to be.
Try this,
your Dashboard content area needed overflow:hidden. check this doc
<div class="flex flex-row w-full h-screen">
<div class="w-1/5 max-h-full bg-gray-800 text-white p-6">Sidebar</div>
<div class="flex flex-col w-full max-h-full bg-gray-200">
<div class="flex flex-row w-full bg-white items-center shadow-xl">
<input class="w-full py-4 px-6 text-gray-700 leading-tight focus:outline-none" id="search" type="text" placeholder="Search an article" />
<div class="flex p-4 flex-column">
<div class="border-r-2 w-16">
<button class="text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
<img src="../assets/search_icon.png" />
</button>
</div>
<div class="flex flex-column">
<button class="ml-3 text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
<img src="../assets/notifications.png" />
</button>
<button class="ml-3 text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
<img src="../assets/user.png" />
</button>
</div>
</div>
</div>
<div class="flex flex-col max-w-full m-6 h-full rounded-b-2xl overflow-hidden">
<div class="flex flex-row w-full my-6 m-auto justify-between">
<p class="text-3xl font-bold">Dashboard</p>
<button class="bg-yellow-500 hover:bg-darkgray text-white font-bold h-12 px-4 rounded-xl justify-end" type="button"><span class="mr-2">+</span> Create an article</button>
</div>
<div class="flex flex-row w-full bg-white rounded-t-2xl justify-between px-6 py-6 h-16">
<a class="text-orange font-bold">HIGHLIGHTS ARTICLES</a>
<div class="flex justify-end space-x-4">
<div id="1" class="selected cursor-pointer"><a class="item-selected font-bold">Recently updated</a></div>
<div id="2" class="cursor-pointer"><a class="item font-bold">Recently seen</a></div>
<div id="3" class="cursor-pointer"><a class="item font-bold">Created by me</a></div>
</div>
</div>
<div class="flex w-full mt-0.5 bg-red-500 rounded-b-2xl max-h-full p-6">Test Doc</div>
</div>
</div>
</div>
Check on Tailwind Play
What i want is the whole page to be static and division with paragraph to be scrollable. At the moment main page is also scrollable because of masthead. How to prevent this?
Code snippet:
<main class="flex flex-col h-screen">
<div class="flex bg-blue-300 h-32 ">Masthead</div>
<div class="flex flex-row h-full">
<div class="bg-gray-100 w-32 p-4">Sidebar</div>
<div class="flex flex-col bg-white flex-grow">
<div class="bg-gray-300 h-16 p-4">
<p>Header</p>
</div>
<div class="paragraph overflow-y-auto px-4">
#for($i=1; $i < 200; $i++)
<p>paragraph</p>
#endfor
</div>
</div>
</div>
</main>
I have always preferred to use flex flex-col flex-1 combination to achieve such layout. Checkout Tailwind Layout I created for better understanding.
<main class="flex flex-col h-screen">
<div class="flex h-32 bg-blue-300">Masthead</div>
<div class="flex flex-1 overflow-hidden">
<div class="flex bg-gray-100 w-32 p-4">Sidebar</div>
<div class="flex flex-1 flex-col">
<div class="flex bg-gray-300 h-16 p-4">Header</div>
<div class="flex flex-1 bg-blue-300 overflow-y-auto paragraph px-4">
#for($i=1; $i < 200; $i++)
<p>paragraph</p>
#endfor
</div>
</div>
</div>
<div class="flex">Footer</div>
</main>