I am running into an issue with centered text that has the whitespace-nowrap class only overflowing to the right. I want it to still be centered and overflow to the left just as much as the right.
<div class="mr-[23px] items-center content-center justify-center">
<span class="font-inter font-bold text-12px text-white w-[40px] text-center whitespace-nowrap">
testtext
</span>
</div>
Related
I'm trying to create a custom shape that has a triangle that overflows on the square left side.
I've tried to use absolute and relative positions to achieve it by putting the square behind it but then it hides the spans on the main square. How can I do it?
Shape that I'm trying to achieve
My code:
<div class="h-96 p-6 bg-white relative rounded-3xl border-3 border-white shadow-sm transition ease-in-out hover:scale-110">
<div class="flex justify-between">
<i class="fa-solid fa-gem text-4xl text-secondary"></i>
<div class="absolute -top-5 right-8 flex flex-col items-center p-4 bg-blue">
<span class="text-purewhite font-semibold text-3xl">25€</span>
<span class="text-gray-200 font-semibold">for month</span>
</div>
<!-- <span class="text-3xl text-primary font-medium">Base</span> -->
</div>
</div>
This is what my current UI looks like
Already written in the top
In my web project, I'm trying to reproduce the following card:
When the Card is not active it is characterized by the fact that the image is always in the center even though the title has a dynamic height, and when its active (i.e it has the blue background) I don't want to change the height of the card but just to push the image up a little bit to add that extra space where the new round arrow button will appear and I'm completely unable to make this happen.
I'm using tailwind in a Nextjs project but plain and simple html and css would also be fine.
You could use flexbox to align the content to the bottom of the card and give the text a fixed height when inactive to keep it at the same position regardless of whether it spans one or two lines.
To move everything up for the arrow you could render an arrow element below the text when he card is active and it would automatically push everything up. You could remove the fixed height of the text when active so there is no gap between the text and arrow. I have created an example here https://play.tailwindcss.com/7h1IY8alDQ.
Here is the code:
<div class="flex h-screen space-x-4 bg-blue-100 p-6">
<!-- card 1 -->
<div class="group flex h-32 w-32 flex-col items-center justify-end space-y-2 rounded-lg border-4 border-white bg-white p-2 hover:border-[#5691C3] hover:bg-[#80B2D5]">
<!-- icon -->
<div class="h-10 w-10 bg-gray-300 group-hover:bg-white"></div>
<!-- title -->
<p class="h-8 text-center text-xs text-black group-hover:h-auto group-hover:text-white group-hover:underline">Motor</p>
<!-- arrow -->
<div class="relative hidden h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 border-white text-sm group-hover:flex"></div>
</div>
<!-- card 2 -->
<div class="group flex h-32 w-32 flex-col items-center justify-end space-y-2 rounded-lg border-4 border-white bg-white p-2 hover:border-[#5691C3] hover:bg-[#80B2D5]">
<!-- icon -->
<div class="h-10 w-10 bg-gray-300 group-hover:bg-white"></div>
<!-- title -->
<p class="h-8 text-center text-xs text-black group-hover:h-auto group-hover:text-white group-hover:underline">Workmen Compensation</p>
<!-- arrow -->
<div class="relative hidden h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 border-white text-sm group-hover:flex"></div>
</div>
</div>
I have following sample, written in tailwind css:
https://play.tailwindcss.com/f9iOK1e0oM
I want to have my control buttons on the bottom if the grid containers, however, they have different content sizes for the blue "tag" boxes, so the grid gets increased in height by some containers. however, as I am working with grid, all boxes are getting this height then. this is ok. But my control buttons should be always on the bottom of the containers, so that "Enabled" and "Delete" should not be so far away from bottom for the second container.
How to achieve this?
You need to add flex flex-col to the li element. And grow to the first child div and grow-0 max-h-max to the second child div.
<li class="flex flex-col col-span-1 divide-y divide-gray-200 rounded-lg bg-white shadow">
<div class=" grow flex w-full flex-col items-start justify-between p-6">
<div class="flex w-full items-start justify-between space-x-3">
<h3 class="truncate text-sm font-medium text-gray-900">243rfh83294d-23r8fj2n48r-24fi43bf</h3>
<span class="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"> running </span>
</div>
<p class="mt-1 whitespace-pre-wrap text-xs font-bold text-gray-500">Interval: <span class="font-normal">1234</span></p>
<p class="mt-1 whitespace-pre-wrap text-xs font-bold text-gray-500">Next run: <span class="font-normal">1234</span></p>
<p class="mt-1 whitespace-pre-wrap">
<span class="inline-block flex-shrink-0 rounded-full bg-blue-100 px-2 py-0.5 text-xs text-blue-800">test 1</span>
</p>
</div>
<div>
<div class="-mt-px flex shrink-0 grow-0 divide-x divide-gray-200 max-h-max">
<div class="flex w-0 flex-1">
<button class="relative -mr-px inline-flex w-0 flex-1 items-center justify-center rounded-bl-lg border border-transparent py-4 text-sm font-medium text-gray-700 hover:text-gray-500">
<span class="ml-3">Enabled</span>
</button>
</div>
<div class="-ml-px flex w-0 flex-1">
<button class="group relative inline-flex w-0 flex-1 items-center justify-center rounded-br-lg border border-transparent py-4 text-sm font-medium text-gray-700 transition hover:text-red-500">
<span class="ml-3">Delete</span>
</button>
</div>
</div>
</div>
</li>
https://play.tailwindcss.com/ilTMM5glku
I have done this only for the second card, but you should do it for all cards. So that when the content changes, the button row will always stick to the bottom and keep the same height in all cards.
Hope this helps.
I am trying to position icon to the left side of a Link and have the text centered at the same time.
<div className="max-w-screen-2xl mx-auto sm:px-6 lg:px-8">
<Link
href="#"
className="px-6 py-3 mt-2 flex justify-center text-center"
>
<DocumentTextIcon
className="ml-1 mt-1 -mr-1 h-10 w-10"
aria-hidden="true"
/>
<p>
Some random text </p>
</Link>
</div>
With this the icon is in the middle with the text. I can push to the right with margin left but then it is not dynamic. Any idea how I can push the icon to the left and it remains dynamic?
Try this way:
<div class="my-10 flex items-center justify-center bg-gray-100 w-40">
<div class="flex-1">
<span class="mr-auto">icon</span>
</div>
<p>text</p>
<div class="flex-1"></div>
</div>
<div class="my-10 flex items-center justify-center bg-gray-100 w-80">
<div class="flex-1">
<span class="mr-auto">icon</span>
</div>
<p>with long text</p>
<div class="flex-1"></div>
</div>
Demo
I am using Tailwind and I made this div:
The problem is that it looks like this when I shrink it down:
With white-space: nowrap it goes out of the div.
I am not able to fix this issue. However, I have made it go into columns when it goes below md screen however not sure how I can stop it from making another line when resolution changes.
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 md:space-x-16 whitespace-nowrap'>
<div className='bg-primary rounded w-14 h-14 flex items-center'>
<img src={props.logo}/>
</div>
<div className='flex flex-col flex-grow'>
<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 md:pr-4'>
<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>
the best solution for you if you don't want to make the fonts smaller, IMO would be: adding a wrapper on three columns at the right and making it a flex with justify-content: space-between.
It will adjust the gaps according the space left for use.
seems your title at the left content is dynamic and it can get really long, try limiting text width and using text-overflow: ellipsis on it. otherwise you cannot fit long text beside other content.