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
Related
I am using both daisyUI with Tailwind for this project. I want to target a specific text here, in this case, the word 'developer':
I want something similar to what is happening with shapes in 2015 XOXO festival webpage.
I've tried just using mix-blend-difference, but it does not work, probably because it is looking at the immediate parent element.
<div class="flex flex-col min-h-screen" style="background-image: url("/src/images/mesh-gradient.png");">
<div class="flex flex-1 flex-col base-100 text-base-content">
<div class="hero bg-transparent h-96">
<div class="hero-content text-center">
<div class="max-w-md">
<h1 class="text-5xl font-bold">
<div>Hi, I'm Anon,</div>
<div>a <span class="mix-blend-difference">developer</span></div>
</h1>
</div>
</div>
</div>
</div>
</div>
Pretty sure that this is wrong, but I've also tried stacking multiple mix-blend-difference, starting from the immediate child to the nested element:
<div class="flex flex-col min-h-screen" style="background-image: url("/src/images/mesh-gradient.png");">
<div class="flex flex-1 flex-col base-100 text-base-content">
<div class="hero bg-transparent h-96 mix-blend-difference">
<div class="hero-content text-center mix-blend-difference">
<div class="max-w-md mix-blend-difference">
<h1 class="text-5xl font-bold mix-blend-difference">
<div class="mix-blend-normal">Hi, I'm Anon,</div>
<div class="mix-blend-difference"><span class="mix-blend-normal">a</span> <span class="mix-blend-difference">developer</span></div>
</h1>
</div>
</div>
</div>
</div>
</div>
daisyUI's hero-content is the culprit here.
.hero-content {
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
max-width: 80rem;
gap: 1rem;
padding: 1rem;
}
It sets z-index to 0, which causes mix-blend-difference to behave improperly. There are two ways to fix this:
Remove the class hero-content.
Add the class z-auto to override hero-content default z-index value.
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 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'm using bootstrap 4, i have a div that got d-flex and it's supposed to display direction row at the "lg" (screens 1200px and greater) breakpoint and when it's used on a mobile phone "sm" or "xs" breakpoint would be used and it would display direction column and behave like a column, but no matter how i try it, it just stays a row all the time
i tried
<div class="d-flex flex-sm-column flex-lg-row justify-content-lg-around">
and
<div class="d-flex flex-xs-column flex-lg-row justify-content-lg-around">
but it doesn't work..am i misunderstanding the breakpoint system or something? i mean i would do the same using the CSS media queries.
here is the full code
<div class="w-75 my-5 mx-auto">
<h1 class=" text-center my-3">Awards won</h1>
<div class="d-flex flex-sm-column flex-lg-row justify-content-lg-around">
<div class="d-flex flex-column col-sm-4 align-items-center">
<img src="./assets/award1.PNG" width="150" height="150" class="award-img">
<span> Award title </span>
<hr class="bg-dark w-50 m-0"/>
<span class="w-75 text-center text-break">Best cake made in 2019</span>
</div>
<div class="d-flex flex-column col-sm-4 align-items-center">
<img src="./assets/award2.PNG" width="150" height="150" class="award-img">
<span> Award title </span>
<hr class="bg-dark w-50 m-0"/>
<span class="w-75 text-center text-break">Winners of the national cake baking contest</span>
</div>
<div class="d-flex flex-column col-sm-4 align-items-center">
<img src="./assets/award3.PNG" width="150" height="150" class="award-img">
<span> Award title </span>
<hr class="bg-dark w-50 m-0"/>
<span class="w-75 text-center text-break">Most satisfied customers award</span>
</div>
</div>
</div>
solved it, it seems bootstrap handles the xs breakpoint by not including a breakpoint value in the class utility
<div class="d-flex flex-column flex-lg-row justify-content-around">
this works
You should be using css to accomplish this. Bootstrap should be used for the grid. CSS to style elements. It'll make your markup a whole lot clearer and avoids using unnecessary inline classes. Heres an example
html
<div class="col-sm-4">
<div class="item">
<div class="item__title">Heres a title</div>
<div class="item__content">
some content
</div>
</div>
</div>
css
.item{
display: flex;
flex-direction: column;
#media (min-width: 1200px){
flex-direction: row;
}
}
I am trying to float a button to the right of a card. I want it to appear in the bottom righthand corner.
When I use a float right. It appears outside the parent div, is there a way to position it correctly?
<div class="m-10">
<div>
<div class="bg-white shadow-lg border-grey w-1/3 ">
<div class="p-4 flex">
<div class="pt-3 text-center font-bold text-2xl w-16 h-16 bg-grey-lightest">
D
</div>
<div class="ml-4">
Team Name
</div>
</div>
<div class="float-right">
<a :href="'/company/' + team.id">
<button class="ml-2 bg-blue hover:bg-blue-dark text-white text-sm font-bold rounded p-2">
View
</button>
</a>
</div>
</div>
</div>
</div>
I have a running sandbox here with the code
https://codesandbox.io/s/tailwind-css-nl0ph
Instead of using the float-right class use text-right
You just need to apply float-right to the button element instead of the parent div
<div class="m-10">
<div>
<div class="bg-white shadow-lg border-gray-400 w-1/3">
<div class="p-4 flex">
<div class="pt-3 text-center font-bold text-2xl w-16 h-16 bg-gray-200">
D
</div>
<div class="ml-4">Team Name</div>
</div>
<div class="h-fit min-h-full flex justify-end">
<a href="'/company/' + team.id">
<button class="float-right ml-2 bg-blue-400 hover:bg-blue-600 text-white text-sm font-bold rounded px-2 py-1">
View
</button>
</a>
</div>
</div>
</div>
</div>
Add this new class to clear floating element
.clearfix::after {
content: "";
clear: both;
display: table;
}
and then apply that class to the containing div (parent div of the button)
source: https://www.w3schools.com/howto/howto_css_clearfix.asp