EDIT: the wrong behavior was due to a missed </div> (see screenshots).
Thank you so much for your patience -_-
I'm struggling with horizontal item centering in Tailwind CSS.
Let's take a div with two children like so:
<div class="flex flex-row w-60 justify-center items-center space-x-10 border-2">
<p>text 1</p>
<p>text 2</p>
</div>
and weirdly enough, it's not centered!
The problem, I found out, is that the x-spacing is added between the two objects but is eating away at the space before the first object, so that the leftmost object gets "pushed" more to the left as space-x increases.
This is centered:
<div class="flex flex-row w-60 justify-center items-center space-x-0 border-2">
<p>text 1</p>
<p>text 2</p>
</div>
Result:
this is not:
<div class="flex flex-row w-60 justify-center items-center space-x-16 border-2">
<p>text 1</p>
<p>text 2</p>
</div>
Result:
Does anyone know a solution to this? Is it a bug or am I just expecting the wrong behavior from justify-items?
The problem lies with the use of w-60 which sets the <div> to 15rem wide. This results in your two <p> tags being centered inside the allowed 15rem, but since the <div> is left-aligned, the items are not properly centered.
You can remove that class to center the two <p> tags as required. Alternatively, you can add another <div> tag with the w-60 class to get the centered effect you're after.
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css" rel="stylesheet"/>
<div class="w-60 bg-red-50">This div is 15rem wide</div>
<hr class="my-5">
<!-- 15rem container div -->
<div class="flex w-60 bg-red-50 justify-center items-center space-x-16 border-2">
<p>text 1</p>
<p>text 2</p>
</div>
<hr class="my-5">
<!-- Additional div wrapper with the w-60 class applied. -->
<div class="w-60 mx-auto">
<div class="flex bg-red-50 justify-center items-center space-x-16 border-2">
<p>text 1</p>
<p>text 2</p>
</div>
</div>
<hr class="my-5">
<!-- 100% wide container div -->
<div class="flex bg-red-50 justify-center items-center space-x-16 border-2">
<p>text 1</p>
<p>text 2</p>
</div>
The flex-row class is redundant since it's the default behaviour, so I've removed it from the code.
Did you expected this?
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css" rel="stylesheet"/>
<div class="flex justify-between">
<div class="flex px-2 ">text 1</div>
<div class="flex px-2 ">text 2</div>
<div class="flex px-2 ">text 3</div>
</div>
If not, please describe in more detail what you expect the result to be!
Related
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 to place two column side by side. One of these columns has a fixed width. I am really trying hard to understand why the fixed width in one column is not working on Tailwind CSS flexbox.
I have the following code:
<div class="flex flex-row justify-between items-start shrink-0">
<p class="mt-4 h-14 overflow-hidden leading-7">This title pushed back the next element</p>
<div class="p-1 w-16 h-16 text-white text-center">
<p class="text-sm">05</p>
<p class="text-3xl leading-none font-bold">JUNE</p>
</div>
</div>
Tailwind Version: 3.0.23
Output:
Inspect Element:
Expected output:
Actually when using flex , it shrinks itself if not explicitly specified for responsive design
Refer the tailwind flex-shrink documentation https://tailwindcss.com/docs/flex-shrink
It says to use the flex-shrink-0 css property i.e shrink-0 class to avoid the width from being shrinked due to variable width size.
So code should look like:
<div className="flex flex-row justify-between items-start">
<p className="mt-4 h-14 overflow-hidden leading-7">
This title pushed back the next element and this is the long text to
check the overflow of the text and lets see if this actually works
</p>
<div className="p-1 w-16 h-16 text-white text-center shrink-0 bg-purple-500">
<p class="text-sm">JUN</p>
<p class="text-3xl leading-none font-bold">05</p>
</div>
And the output looks like :
<div class="flex flex-row justify-between items-start shrink-0">
<p class="mt-4 h-14 w-[70%] overflow-hidden leading-7">This title pushed back the next element</p>
<div class="p-1 w-[15%] h-16 text-white text-center">
<p class="text-sm">05</p>
<p class="text-3xl leading-none font-bold">JUNE</p>
</div>
</div>
Maybe like this work
You can simply use flex properties here while keeping the width same.
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-row justify-between items-start ">
<div>
<p class="py-2 px-2 h-14 overflow-hidden leading-6">This title pushed back the next element
his title pushed back the next element.</p>
</div>
<div class="px-2 w-16 h-16 mr-2 text-white bg-purple-500 text-center">
<p class="text-sm">June</p>
<p class="text-3xl leading-none font-bold">05</p>
</div>
</div>
i created a page layout with tailwind css with help of the flex utilities. Now i struggle with one issue.
On the right side there is a header section with title and description.
I want now that the description is never taking more than 100% of the width and automatically truncates the text if it has more.
I prepared a working example to demonstrate my problem:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex bg-blue-100 h-screen">
<div class="bg-green-100 w-16 flex-none">A</div>
<div class="bg-blue-100 w-96 flex-none">SB</div>
<div class="bg-red-100 flex-auto">
<div class="flex flex-col">
<div class="flex flex-col space-y-2 bg-pink-100 p-3">
<h1 class="bg-yellow-100">Title</h1>
<h2 class="bg-yellow-200 truncate">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>
</div>
<div class="bg-pink-200 p-3">...</div>
</div>
</div>
</div>
It would be super nice if someone could help my by solving this problem.
Many thanks in advance
Kai
Just add 'overflow-hidden' to your third column.
<div class="flex bg-blue-100 h-screen">
<div class="bg-green-100 w-16 flex-none">A</div>
<div class="bg-blue-100 w-96 flex-none">SB</div>
<div class="bg-red-100 flex-auto overflow-hidden">
<div class="flex flex-col">
<div class="flex flex-col space-y-2 bg-pink-100 p-3">
<h1 class="bg-yellow-100">Title</h1>
<h2 class="bg-yellow-200 truncate">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>
</div>
<div class="bg-pink-200 p-3">...</div>
</div>
</div>
</div>
I suggest you
use overflow-ellipsis together overflow-hidden, that will help you description is never taking more than 100% of the width, even help for responsive design on the tablet mode(768px) easily
<div class="flex flex-col space-y-2 bg-pink-100 p-3 ">
<h1 class="bg-yellow-100">Title</h1>
<h2 class="bg-yellow-200 overflow-clip overflow-hidden">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>
</div>
I hope helped you
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:
<div class="flex flex-grow h-full w-100">
<div class="flex flex-col bg-white w-1/5">
<div class="dates px-4">
<p>Today</p>
<p>Tomorrow</p>
<p>Upcoming</p>
</div>
<hr />
<div class="projects flex-grow px-4">
<p>Project 1</p>
<p>Project 2</p>
</div>
<div class="footer">
<hr />
<button class="outline-none py-2 border-gray-400 text-red-400 w-full">
Add project
</button>
</div>
</div>
<div class="main bg-gray-100 flex-grow">Hello</div>
<div class="bg-white w-1/5">Hello</div>
</div>
In the above code, I want only the div with class projects to be scrollable while holding the dates and footer fixed on their places. how to do that using tailwind.css ?! I also want the div with class main to be scrollable vertically while holding the other two divs fixed on their places without scrolling.
It sounds a bit like a common usage of overflow-y.
For example, you could add this CSS rule to your project's class:
.projects {
overflow-y: scroll;
}
You can add this rule to whichever container you want to be scrollable - in this case vertically.
On the other, there is overflow-x: scroll for horizontal scrolling, or overflow: scroll for both (shorthand).
According to tailwind overflow guide, you can use .overflow-y-auto for vertical scrolling.
e.g.
<div class="projects flex-grow overflow-y-auto px-4">
It's good that you have used .flex-grow otherwise you would have to give a max-height to the div.
<div class="flex flex-grow h-full w-100">
<div class="flex flex-col bg-white w-1/5">
<div class="dates px-4">
<p>Today</p>
<p>Tomorrow</p>
<p>Upcoming</p>
</div>
<hr/>
<div class="projects h-auto overflow-x-auto flex-grow px-4">
<p>Project 1</p>
<p>Project 2</p>
</div>
<div class="footer">
<hr/>
<button class="outline-none py-2 border-gray-400 text-red-400 w-full">
Add project
</button>
</div>
</div>
<div class="main bg-gray-100 flex-grow">Hello</div>
<div class="bg-white w-1/5">Hello</div>
</div>