I'm using tailwindcss. How can I make sure the label is not growing with the description?
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex items-center">
<div>block</div>
<div class="ml-6">
<p>
Title
</p>
<p class="bg-blue-500">
Description long long long long long long long long long long long long long
</p>
<div class="px-2 py-1 bg-red-500 rounded-xl text-xs text-gray-700">
Label...
</div>
</div>
</div>
you can use w-fit or inline display styles to <div ...> Label... like inline or inline-block
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex items-center">
<div>block</div>
<div class="ml-6">
<p>
Title
</p>
<p class="bg-blue-500">
Description long long long long long long long long long long long long long
</p>
<div class="px-2 py-1 bg-red-500 rounded-xl text-xs text-gray-700 w-fit">
Label...
</div>
</div>
</div>
Related
I recently started working with Tailwind and I can't figure out how to work with long text and grids in general.
Now my problem looks like this.
If you start typing long text or some long words or phrases, then the text block starts to break everything
<div class="flex align-center justify-between mt-1" style="padding-left: 4px; padding-right: 4px">
<div class="col-span-1 flex-none">
<img class="mt-1 mb-1" src="{{$link->icon}}" style="width:50px; border-radius: {{$link->rounded}}px;">
</div>
<div class="col-span-10 text-center flex items-center">
<div class="ml-3 mr-3">
<h4 class="text-ellipsis" style="{{$link->title}}</h4>
</div>
</div>
<div id="up" class="col-span-1 flex items-center flex-none">
<img src="https://digiltable.com/wp-content/uploads/edd/2021/09/Sexy-lady-logo-Pornhub-logo.png" style="width:50px; border-radius: {{$link->rounded}}px;">
</div>
</div>
You are facing this because your title is wrapped inside style
Change:
<h4 class="text-ellipsis" style="{{$link->title}}</h4>
to
<h4 class="text-ellipsis" >{$link->title}</h4> 👈 Place it here
I need to add 2 children of a parent element one on the top and another on the bottom. something like this.
and this is the code I have.
<div class=" w-full flex justify-betwen bg-white items-center">
<div class="ml-auto">
<img class="object-cover mr-2 md:mr-4 ml-2 md:ml-4 float-left h-40 lg:w-32 w-14 xs:w-16"
src="../img/Bless.png" alt="" />
</div>
<div class="w-full mx-8">
<div class="text-redfull text-ms xs:text-lg md:text-xl lg:text-2xl xl:text-3xl">
Some text here to top as a title.
</div>
<div
class=" text-gray70 flex justify-between items-center text-xs xs:text-base md:text-base lg:text-lg mb-0">
and this is the date to the bottom Uploaded Auguts 4, 2020
</div>
</div>
</div>
Title should stay at the top.
Date to the bottom.
If anyone knows:)
You can add two divs for Title and Date and add vertical margin to them.
I am not sure whether you want with the text or not so I had implemented for both the cases.
Case 1: With text
<script src="https://cdn.tailwindcss.com"></script>
<div class="justify-betwen flex w-full items-center bg-white">
<div class="ml-auto">
<img class="xs:w-16 float-left mr-2 ml-2 h-40 w-14 object-cover md:mr-4 md:ml-4 lg:w-32" src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_blue.s2014.png" alt="" />
</div>
<div class="mx-8 w-full">
<div class="text-3xl font-semibold text-red-900">Your Title here</div>
<div class="my-3">
<div class="text-ms xs:text-lg text-red-500 md:text-xl lg:text-2xl xl:text-3xl">Some text here to top as a title.</div>
<div class="xs:text-base mb-0 flex items-center justify-between text-xs text-gray-500 md:text-base lg:text-lg">and this is the date to the bottom Uploaded Auguts 4, 2020</div>
</div>
<div class="text-base font-extralight">25 June 2022</div>
</div>
</div>
Case 2: Without Text
<script src="https://cdn.tailwindcss.com"></script>
<div class="justify-betwen flex w-full items-center bg-white">
<div class="ml-auto">
<img class="xs:w-16 float-left mr-2 ml-2 h-40 w-14 object-cover md:mr-4 md:ml-4 lg:w-32" src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_blue.s2014.png" alt="" />
</div>
<div class="mx-8 w-full">
<div class="text-3xl font-semibold text-red-900">Your Title here</div>
<div class="my-12">
</div>
<div class="text-lg font-extralight">25 June 2022</div>
</div>
</div>
I had use an online image, so you can replace it with your image.
If You want more gap, then simply increase the my-12 to more.
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>
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!
This is my design with flex. You can see both the div's are having different gap in between. How Can I make it equal?
I just want to set a fixed width for the second column however I am not able to achieve it in Tailwind.
Code:
<div className='bg-gray-1000 rounded shadow border border-opacity-50 text-white flex flex-col lg:flex-row w-7/12 mx-auto justify-between p-2 mb-2 items-center'>
<div className='bg-primary rounded w-14 h-14 flex items-center'>
<img src={props.logo}/>
</div>
<div className='flex flex-col'>
<div>{props.title}</div>
<div className='flex'>
<div><img className='w-6 mt-1' src={props.flag}/></div>
<div><FaInfoCircle className='inline ml-2 text-xl'/></div>
<div><button className={`ml-2 rounded px-4 py-0 text-sm uppercase bg-${props.color}-600`} disabled>{props.mode}</button></div>
</div>
</div>
<div className='flex flex-col'>
<div><FaCalendar className='inline mr-2 text-xl'/> {props.date}</div>
<div className='mt-1'><FaClock className='inline mr-2 text-xl'/> {props.time}</div>
</div>
<div className='flex flex-col'>
<div> <FaUsers className='inline mr-2 text-xl'/> {props.vs}</div>
<div className='mt-1'><FaUsers className='inline mr-2 text-xl'/> {props.slots} Slots</div>
</div>
<div className='flex flex-col'>
<div><AiFillDollarCircle color='green' className='inline mr-2 text-xl'/></div>
<div className='mt-1'><AiFillTrophy className='inline mr-2 text-xl md:text-2xl'/> {props.prize}</div>
</div>
</div>
I would love to get some help on this, cheers.
Add flex-grow class to block with title and set space-x-{value} class for parent so it will add gap between child elements. Demo
P.S. You have bg-${props.color}-600 which will be purged in a production mode