I have 2 divs under 1 div.
first div should be w-64.
second div's width want to be the rest except for 64.
How to make it?
and if I use grid then how to make that?
<div className="w-screen h-screen">
<div className="fixed top-0 left-0 w-64 h-screen" >
</div>
<div className="flex bg-blue-100 justify-center items-center">
{children}
</div>
</div>
You can add to the second div two Tailwind properties:
w-[calc(100vw-16rem)], where 100vw is a fullscreen and w-64 = width: 16rem; /* 256px */), then we calculate the width of the div.
After that we offset the second div with ml-auto.
<div className="w-screen h-screen">
<div className="fixed top-0 left-0 w-64 h-screen"></div>
<div className="grid w-[calc(100vw-16rem)] ml-auto bg-blue-100 justify-center items-center">
{children}
</div>
</div>
Grid solution
For the grid, we need to add a grid property to the parent element and set two columns grid-cols-[16rem_calc(100vw-16rem)]. The first column is static, and the second is responsive. We also need to remove all properties from the first child element.
<div className="grid grid-cols-[16rem_calc(100vw-16rem)] w-screen h-screen ">
<div className="flex"></div>
<div className="flex bg-blue-100 justify-center items-center">
{children}
</div>
</div>
Related
I'm having immense trouble understanding the concept of div height and overflow. Been searching for two days but I think I'm missing a key concept here...
My layout looks like this (Tailwind Playground):
The blue div does not scroll all the way to the end of the content. For some reason the div thinks that its height is larger than it really is (by exactly the height of the second navbar (red) on top of it). As a result, I can't scroll all the way to the bottom.
Also, having to repeat h-full for each child div until I reach the div that I want to be scrollable seems off to me but otherwise it assumes h-auto which is not good.
<div class="h-screen overflow-hidden">
<div class="flex h-full flex-col overflow-hidden">
<div class="w-full bg-slate-500 text-center text-white h-12 ">NAVBAR</div>
<div class="flex h-full overflow-hidden">
<div class="flex h-full basis-1/6">
<div class="w-full bg-gray-300 text-center text-black">Sidebar</div>
</div>
<div class="flex h-full grow flex-col bg-slate-500">
<div class="h-12 w-full shrink-0 bg-red-400 text-center">Second Navbar</div>
<div class="h-full w-full grow bg-green-400">
<div class="flex h-full">
<div class="w-1/3 bg-blue-400 text-center">
<div class="flex h-full flex-col overflow-y-scroll">
<div>
Lorem....
</div>
</div>
</div>
<div class="h-full w-2/3 overflow-y-scroll bg-orange-400 text-center">Main content</div>
</div>
</div>
</div>
</div>
</div>
</div>
Lets look at the container(blue parent) under the second navbar. Its parent (the parent of the second navbar as well) have a height of about 831px. The navbar height is 3rem - which is about 48px.
But the blue parent has a height of 100% (of its parent) ~ 831px. So its basically overflowing (because 831+48 != 831).
If you put the overflow:hidden on the blue parent it'll hide the overflowing and blue container will scroll normally.
https://play.tailwindcss.com/SOO2rwiGsw
Why am I not getting a vertical scrollbar in each div? If I use max-h-screen instead of max-h-full I'm getting the scrollbar but the problem is that - because of the navbar - the content at the bottom of the screen is clipped by exactly the height of the navbar.
Playground
<div class="h-screen overflow-hidden">
<div class="flex flex-col">
<div class="h-12">Navbar </div>
<main class="flex flex-row">
<div class=" w-1/5 flex h-full max-h-full overflow-y-auto flex-col flex-grow bg-purple-50">Lorem... </div>
<div class=" w-4/5 bg-gray-50 h-full max-h-full overflow-y-auto">Lorem... </div>
</main>
</div>
You need to carry the height: 100% onto the second nested div, and your main. Otherwise the height becomes auto and grows to accommodate your content, so on tailwind that looks like it's h-full you'll need to put on both of those:
<div class="h-screen overflow-hidden">
<div class="flex flex-col h-full">
<div class="h-12">Navbar </div>
<main class="flex flex-row h-full">
<div class=" w-1/5 flex h-full max-h-full overflow-y-auto flex-col flex-grow bg-purple-50">Lorem... </div>
<div class=" w-4/5 bg-gray-50 h-full max-h-full overflow-y-auto">Lorem... </div>
</main>
</div>
I have a flexbox with 3 children items that looks something like this:
<section className="px-5 flex flex-col md:flex-row md:space-x-10 justify-around">
<div className="flex flex-col py-3 md:flex-grow"><input ... /></>
<div className="flex flex-col py-3 md:flex-grow"><input ... /></>
<div className="flex flex-col py-3 md:flex-grow"><input ... /></>
</section>
This works fine in full screen, however flex items start to break out of parent after shrinking the window width (near 1000px).
How can I make it so the items stay inside their parent?
Fullscreen
After shrinking window width
What I would like to achieve
By adding flex-wrap class in the parent(section tag in your case) will fix the issue.
Read more about flex-wrap https://tailwindcss.com/docs/flex-wrap
If you use flexbox, you can use flex wrap property to solve your proble.,
But i try to get the same result with grid
<div class="container py-10">
<section class="grid grid-cols-3 gap-4 p-5 border border-gray-400 rounded-lg">
<div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
<div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
<div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
</section>
</div>
This is better i think :)
How do I get the second inner div to be on top of the first inner div (map)? I can't figure this out, despite using relative & absolute positioning. I'm using React & Tailwind CSS. Instead, the second inner div currently follows the flow of the image and is positioned below the first children div.
<div className="relative w-full h-screen">
<div className="bg-green-400 w-full h-full z-0">
<p className="italic text-bold bd-red-100 font-serif">Map</p>
</div>
<div className="absolute z-50">
<p className="text-2xl font-bold">This should be on top of the map</p>
</div>
</div>
Here's a Tailwind Play Code I created based on your query. I have tweaked height and width for proper visual.
<div class="w-full h-screen bg-gray-200 flex justify-center items-center">
<div class="bg-gray-400 w-96 h-96 relative z-0">
<p class="italic text-bold bd-red-100 font-serif">Map</p>
<div class="absolute inset-0 flex justify-center items-center z-10">
<p class="text-2xl font-bold">This should be on top of the map</p>
</div>
</div>
</div>
I would like to extend #Digvijay's answer further more to provide extended explanation, which consists
1. Logic
2. Responsive Sidebar
3. Responsive Sidebar with hamburger menu
You'll have to work with relative absolute and z-index to make this work.
1. Logic:
Have parent relative having z-index value less than the child absolute div which will be used for navbar.
Code:
<div class="h-screen relative z-0 flex bg-gray-500">
<div class="text-4xl">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div class="absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
</div>
Output:
Code Link: tailwind play
2. Responsive Sidebar
If you are aiming to build responsive sidebar which overlaps only on the mobile screen but would be normal div in the large screen then follow the below code.
Code:
<div class="md:bg-yellow-400 h-screen relative z-0 flex bg-gray-500">
<div class="invisible md:visible bg-blue-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Desktop Navbar
</div>
</div>
<div class="text-4xl">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div
class="absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 md:invisible"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
</div>
Code link : tailwind play
Output in large device:
Output in smaller device:
3. Toggle mobile navbar using hamburger menu
Output on large devices
Output in small device with hamburger menu
When clicked on hamburger menu
Code:
<body>
<div class="bg-yellow-400 h-screen relative z-0 flex">
<div class="hidden md:block bg-blue-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Desktop Navbar
</div>
</div>
<div class="text-4xl pl-24 md:p-0 main_content">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div
class="mobile_navbar absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 hidden md:hidden"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
<div
class="md:hidden space-y-2 absolute hamburger_menu inset-y-0 left-0 p-4"
>
<span class="block w-8 h-1 bg-white"></span>
<span class="block w-8 h-1 bg-white"></span>
<span class="block w-8 h-1 bg-white"></span>
</div>
</div>
<script type="text/javascript">
document
.querySelector(".hamburger_menu")
.addEventListener("click", () => {
console.log("Hello");
document.querySelector(".mobile_navbar").classList.toggle("hidden");
});
document.querySelector(".main_content").addEventListener("click", () => {
console.log("Touch me");
console.log(
document
.querySelector(".mobile_navbar")
.classList.contains("hidden") == false &&
document.querySelector(".mobile_navbar").classList.toggle("hidden")
);
});
</script>
</body>
I am using tailwind in my Vuejs app. I have this simple template
<template>
<div class="bg-gray-500 h-screen">
<Header /><!-- //height 32 -->
<div class="w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg">
<router-view />
</div>
</div>
</template>
The div with h-screen is the root or my app. The component<header> has a tailwind height of h-32
The problem is that the second div causes the page to scroll at the bottom, the height of the <header> (h-32).
What I want to do
If there is no content, I want the second div to fill the remaining height of the screen but no more.
If there is content, I want it grow as necessary.
You can leverage .flex, .flex-col and .flex-1 for this. Check out docs.
<div class="bg-gray-500 flex flex-col h-screen">
<div class="flex h-32 bg-gray-200"></div>
<div class="flex-1 w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg bg-gray-300">
<router-view />
</div>
</div>
Usage of flex-1 is optimal for your solution to expand a certain component in the parent:
Use flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size:
Vertically
<div class="flex h-screen flex-col">
<div class="h-50 bg-cyan-400 text-center text-4xl">Header</div>
<div class="flex-1 bg-yellow-400 text-center text-4xl">I am the body</div>
</div>
Output:
Horizontally
<div class="flex w-screen ">
<div class="h-50 bg-cyan-400 text-center text-4xl">NavBar</div>
<div class="flex-1 bg-yellow-400 text-center text-4xl">I am the body</div>
</div>
Output: