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
Related
I want to create a <hr> divider using Tailwind CSS, but instead of the horizontal rule spanning the entire width of the page unbroken, I want to add some text in the middle.
For example:
----------------------------------- Continue -----------------------------
I can't find anything like this in the documentation. How can I achieve this effect?
If necessary, I can change the HTML to something other than an <hr> element. That was just the only way I knew how to create a horizontal rule.
You can use this HTML syntax to create what you want :
<div class="relative flex py-5 items-center">
<div class="flex-grow border-t border-gray-400"></div>
<span class="flex-shrink mx-4 text-gray-400">Content</span>
<div class="flex-grow border-t border-gray-400"></div>
</div>
See here the result: https://play.tailwindcss.com/65JULZ5XES
Try this instead...
<script src="https://cdn.tailwindcss.com"></script>
<div class="relative py-4">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-b border-gray-300"></div>
</div>
<div class="relative flex justify-center">
<span class="bg-white px-4 text-sm text-gray-500">Continue</span>
</div>
</div>
Example
https://play.tailwindcss.com/Yx4OmAlBsv
Yes, you can do this:
<script src="https://cdn.tailwindcss.com"></script>
<h1 class="text-center overflow-hidden before:h-[1px] after:h-[1px] after:bg-black
after:inline-block after:relative after:align-middle after:w-1/4
before:bg-black before:inline-block before:relative before:align-middle
before:w-1/4 before:right-2 after:left-2 text-xl p-4">Heading
</h1>
Try this.
Need to adjust the height, margin, bg-color, etc. to fit your website.
https://play.tailwindcss.com/FzGZ1fMOEL
<div class="h-5 border-b-4 border-black text-2xl text-center">
<span class="bg-white px-5">your text</span>
</div>
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!
I'm just getting started with tailwind and I would like to grid essentially a row of images that fit the container.
Currently I am just stubbing in 2 photos for testing/getting to know tailwind purposes.
<main class="mt-12 lg:mt-32">
<section class="container mx-auto px-6">
<div class="w-full lg:flex items-center">
<div *ngFor="let item of photos">
<p class="text-md lg:text-xl font-light text-gray-800 mb-8">
{{item.description}}
</p>
<div class="grid grid-col-2 gap-2">
<img [src]="image" *ngFor="let image of item.images"
class="object-contain shadow rounded border-none">
</div>
</div>
</div>
</section>
</main>
This code is causing the 2 images to essentially appear underneath each other as seen here
https://i.imgur.com/vhSBkc7.png
Thank you for any help.
Your class should me grid-cols-2 and the img tag should have col-span-1. Checkout Grid Columns
<div class="grid grid-cols-2 gap-2"> // grid-cols-2
<img [src]="image" *ngFor="let image of item.images" class="col-span-1 object-contain shadow rounded border-none"> // col-span-1
</div>
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>