How do I auto-place new items in columns with Tailwind CSS? - html

I have the following code for my Hugo page for listing out new posts, formatted with Tailwind CSS:
{{ define "main" }}
{{ range .Pages }}
<div class="grid grid-flow-row grid-cols-3">
<div class="flex justify-center">
<div class="bg-white shadow-xl rounded-lg overflow-hidden">
<div class="bg-cover bg-center h-56 p-4" style="background-image: url(https://ui-avatars.com/api/?name=John+Doe&size=512)">
<div class="flex justify-end">
</div>
</div>
<div class="p-4">
<p class="uppercase tracking-wide text-sm font-bold text-gray-700">{{ .Params.Major}}</p>
<p class="text-3xl text-gray-900 font-bold">{{ .Title }}</p>
<p class="text-gray-700">A small description and a bucnch of stuff.</p>
</div>
<div class="flex p-4 border-t border-gray-300 text-gray-700">
<div class="flex-1 inline-flex items-center">
<svg class="h-6 w-6 text-gray-600 fill-current mr-3" viewBox="0 0 20 20">
<path d="M15.573,11.624c0.568-0.478,0.947-1.219,0.947-2.019c0-1.37-1.108-2.569-2.371-2.569s-2.371,1.2-2.371,2.569c0,0.8,0.379,1.542,0.946,2.019c-0.253,0.089-0.496,0.2-0.728,0.332c-0.743-0.898-1.745-1.573-2.891-1.911c0.877-0.61,1.486-1.666,1.486-2.812c0-1.79-1.479-3.359-3.162-3.359S4.269,5.443,4.269,7.233c0,1.146,0.608,2.202,1.486,2.812c-2.454,0.725-4.252,2.998-4.252,5.685c0,0.218,0.178,0.396,0.395,0.396h16.203c0.218,0,0.396-0.178,0.396-0.396C18.497,13.831,17.273,12.216,15.573,11.624 M12.568,9.605c0-0.822,0.689-1.779,1.581-1.779s1.58,0.957,1.58,1.779s-0.688,1.779-1.58,1.779S12.568,10.427,12.568,9.605 M5.06,7.233c0-1.213,1.014-2.569,2.371-2.569c1.358,0,2.371,1.355,2.371,2.569S8.789,9.802,7.431,9.802C6.073,9.802,5.06,8.447,5.06,7.233 M2.309,15.335c0.202-2.649,2.423-4.742,5.122-4.742s4.921,2.093,5.122,4.742H2.309z M13.346,15.335c-0.067-0.997-0.382-1.928-0.882-2.732c0.502-0.271,1.075-0.429,1.686-0.429c1.828,0,3.338,1.385,3.535,3.161H13.346z"></path>
</svg>
<p><span class="text-gray-900 font-bold">3rd</span> Year</p>
</div>
<div class="flex-1 inline-flex items-center">
<svg class="h-6 w-6 text-gray-600 fill-current mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M17.03 21H7.97a4 4 0 0 1-1.3-.22l-1.22 2.44-.9-.44 1.22-2.44a4 4 0 0 1-1.38-1.55L.5 11h7.56a4 4 0 0 1 1.78.42l2.32 1.16a4 4 0 0 0 1.78.42h9.56l-2.9 5.79a4 4 0 0 1-1.37 1.55l1.22 2.44-.9.44-1.22-2.44a4 4 0 0 1-1.3.22zM21 11h2.5a.5.5 0 1 1 0 1h-9.06a4.5 4.5 0 0 1-2-.48l-2.32-1.15A3.5 3.5 0 0 0 8.56 10H.5a.5.5 0 0 1 0-1h8.06c.7 0 1.38.16 2 .48l2.32 1.15a3.5 3.5 0 0 0 1.56.37H20V2a1 1 0 0 0-1.74-.67c.64.97.53 2.29-.32 3.14l-.35.36-3.54-3.54.35-.35a2.5 2.5 0 0 1 3.15-.32A2 2 0 0 1 21 2v9zm-5.48-9.65l2 2a1.5 1.5 0 0 0-2-2zm-10.23 17A3 3 0 0 0 7.97 20h9.06a3 3 0 0 0 2.68-1.66L21.88 14h-7.94a5 5 0 0 1-2.23-.53L9.4 12.32A3 3 0 0 0 8.06 12H2.12l3.17 6.34z"></path>
</svg>
<p><span class="text-gray-900 font-bold"></span> Programming</p>
</div>
</div>
<div class="px-4 pt-3 pb-4 border-t border-gray-300 bg-gray-100">
<div class="text-xs uppercase font-bold text-gray-600 tracking-wide">Made By</div>
<div class="flex items-center pt-2">
<div>
<p class="font-bold text-gray-900">Aman Bhargava</p>
</div>
</div>
</div>
</div>
</div>
</div>
{{ end }}
{{ end }}
What I want is to have three columns of cards, with each new post being added left to right in the columns before adding a new row below. However, my code gives me a stacked listing instead of the expected output:
I would like something like this:
1st Column
2nd Column
3rd Column
First Post
Second Post
Third Post
Fourth Post
Fifth Post
Sixth Post


The problem is that the range function is outside the grid, so it's creating a new grid for each card. You probably want just one grid, with all the cards placed within it.
If you move your range function inside the grid, so that it iterates only over the cards, e.g.:
{{ define "main" }}
<div class="grid grid-flow-row grid-cols-3">
{{ range .Pages }}
<div class="flex justify-center">
<div class="bg-white shadow-xl rounded-lg overflow-hidden">
<!-- content -->
</div>
</div>
{{ end }}
</div>
{{ end }}
then you should get the expected behaviour.

Related

Issue with custom table in ReactJS

I am trying to create a custom table as per the design and I am using Tailwind CSS for styling. I initially used table tags in HTML, but I was unable to style it properly, so I switched to using divs. However, I am facing an issue with the width size of the table head and row. The width is not consistent due to the content of the cells, can anyone please help me in resolving this issue?
Design:
What I get using div instead of table tags:
code:
<div className="flex flex-col">
<div className='flex text-sm font-bold text-gray-500'>
<div className='w-[170px] mr-2'>ລູກຄ້າ</div>
<div className='w-[140px] mr-2'>ປະກັນໄພ</div>
<div className='w-[120px] mr-2'>ບໍລິສັດ</div>
<div className='w-[90px]'>ວັນທີເລີ່ມຕົ້ນ</div>
<div className='w-[90px]'>ວັນທີສິ້ນສຸດ</div>
<div className='w-[90px]'>ສະຖານະ</div>
<div className='flex-1'>ຄ່າທຳນຽມ</div>
<div className='w-[170px]'></div>
</div>
</div>
<hr />
<div className='max-h-[700px] overflow-y-scroll shadow-sm insuranceReport rounded-b bg-white'>
{
orders?.map((order, index)=>(
<div key={index} className={`flex items-center px-5 ${index%2 == 0 ? 'bg-[#F5FCF5]' : 'bg-[#FFFFFF]'} py-4 text-sm hover:opacity-80`}>
<div className='w-[170px] flex items-center mr-2 font-sans text-sm'>
<div className="w-[2.3rem] h-[2.3rem] mr-2 rounded-full overflow-hidden aspect-square">
<img
src={
GetImageUrl(order?.profile, true)
}
alt={order?.name}
className="object-cover w-full h-full"
onError={({ currentTarget }) => {
currentTarget.onerror = null; // prevents looping
currentTarget.src= IMAGE_NOT_FOUND;
}}
/>
</div>
<div className='flex flex-col'>
<Link className='cursor-pointer hover:underline' to={`/sale/${order?.uuid}`}>
<span>{order?.customer?.name}</span>
</Link>
<span className='text-sm opacity-80'>{order?.customer?.gender}</span>
</div>
</div>
<div className='w-[140px] mr-2 text-sm'>{order?.product}</div>
<div className='w-[120px] mr-2 text-sm'>{order?.company}</div>
<div className='w-[90px] text-sm'>{FormatDate(order?.dateStart)}</div>
<div className='w-[90px] text-sm'>{FormatDate(order?.dateEnd)}</div>
<div className='w-[90px] text-sm'><span className={SaleStatusChecker(order?.status)?.color}>{SaleStatusChecker(order?.status)?.status}</span></div>
<div className='flex-1 text-sm'>₭ {order?.totalPrice?.toLocaleString()}</div>
<div className='flex items-start gap-3 text-sm'>
<button className='px-3 py-1 border-2 rounded-lg outline-none active:opacity-50 text-primary' onClick={()=>navigate(`/sale/${order?.uuid}`)}><FontAwesomeIcon icon={faEye}/> ລາຍລະອຽດ</button>
<button className='px-3 py-1 border-2 rounded-lg outline-none active:opacity-50 text-primary' onClick={()=>handleOpenOrderUpdateModal(order?.uuid)}><FontAwesomeIcon icon={faPenToSquare}/> ແກ້ໄຂ</button>
</div>
</div>
))
}
{
(orders?.length == 0 || orders == undefined || orders == []) && !isFetching ? <Empty/> : ""
}
{
isFetching &&
<LoadingData/>
}
</div>
</div>
I don't want to use flex and set a static width size of the div element. Is there any alternative solution to this issue?
Thank you in advance for your help!

Why is there whitespace between my header and div?

As the title says, there is whitespace between header and div. Image can be seen below.
Here is a codepen link that recreates the issue: https://codepen.io/pongbao/pen/MWGXLEm
Thanks a lot to those who can help!
<div id="td-div" class="lg:w-1/6 border-2 border-dark-cyan-600 mr-1 mt-1 relative">
<form id="td-form">
<h2
class="text-sm text-center border-b-2 border-dark-cyan-600 bg-dark-cyan-600 py-1 w-full">
Time
Deposit
</h2>
<ul class="text-xs font-roboto-mono">
<li class="pl-1 pt-1">TENOR: 3 MONTHS</li>
<li class="pl-1">RATE: <span id="td-rate">3.0</span>%</li>
<li class="pl-1 my-auto w-full inline-flex"><label for="time-deposit-amount">AMOUNT:
</label><input id="time-deposit-amount"
class="ml-1 px-1 min-w-0 max-w-full shrink border-b border-slate-400 text-xs text-right"
name="time-deposit-amount" type="number" min="1" step="0.01" placeholder="0.00"
required><span id="max-td-amount"
class="hover:cursor-pointer text-2xs my-auto px-1">MAX</span>
</li>
</ul>
<button id="td-button" type="submit"
class="block mx-auto my-2 py-1 px-1.5 rounded text-xs bg-dark-cyan-300 hover:bg-dark-cyan-400"><a
class="inline-flex">Invest<svg fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-4 h-3 ml-0.5 mt-0.5" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg></a></button>
</form>
</div>

I see this problems in chrome on my screen that has it's dpi set to 125% but not on my other screen where the dpi is set to 100%. I don't seen the problem in firefox at all.
This leads me to think it might be a DPI scaling issue in chrome. Any chance you are using a HiDPI screen?
I'm not sure if there is any good solution for this, but maybe a css on the h2 might work: (maybe not the best solution, but don't know a better one)
position: relative;
top: -1px;
left: -1px;
width: calc(100% + 2px);

Its problem with border-2 which is border-width: 2px; in class list of #td-div. Among others values 2px, 3px, 6px, 7px just leave some space like that . Just change border-2 to border-[2.5px].

Tailwind text align bottom

I have the following code that creates two <p> tags to store some text:
<p v-if="my_property <= 0" class="text-green-500 text-lg font-bold">{{Math.abs(my_value)}}%</p>
<p v-else class="text-red-500 text-lg font-bold">{{my_value}}%</p>
<div class="inline-block align-bottom bg-yellow-500 align-text-bottom">
<p class="text-gray-500 text-sm ml-1 inline-block align-text-bottom align-bottom">tsa</p>
</div>
I'm trying to have the last <p> tag align bottom as compared to the first. I've tried putting the <p> tag currently in the <div> inside and outside a <div> tag, but I can't seem to get the result right, and it currently looks like this:
I want the "tsa" text to appear here:
What do I need to change about the way I've currently got it?
Note: I've highlighted the <div> in yellow to just show the text is not aligned to the bottom of it.

You can solve your issue by adding a flex-container for all your <p> tags.
<div class="flex items-baseline">
<p v-if="my_property <= 0" class="text-green-500 text-lg font-bold">{{Math.abs(my_value)}}%</p>
<p v-else class="text-red-500 text-lg font-bold">29%</p>
<p class="text-gray-500 text-sm ml-1">tsa</p>
</div>

You can follow the below code for the solution
<script src="https://cdn.tailwindcss.com"></script>
<div v-if="my_property <= 0" class="text-green-500 text-lg font-bold">{{Math.abs(my_value)}}%
<span class="text-gray-500 text-sm ml-1 inline-block align-text-bottom align-bottom">tsa</span>
</div>
<div v-else class="text-red-500 text-lg font-bold">{{my_value}}%
<span class="text-gray-500 text-sm ml-1 inline-block align-text-bottom align-bottom">tsa</span>
</div>

How to make the width fit to the content when text wrapped? [duplicate]

This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 1 year ago.
I'm using tailwind to create a card with an arrow. I want the arrow always next to the text 10px. But when the text is wrapped, the width of the text is larger than the actual width of the text.
I tried adding width: fit-content but the text will overflow and can't wrap. If I add width: min-content then the text always wraps.
I must use javascript to get the actually width of the text in this case, right?
Here is my code:
<div class="grid grid-cols-3 gap-8 m-20 lg:max-w-[1200px]">
<div class="w-full h-52 overflow-hidden shadow-xl p-8 flex items-center justify-start gap-4">
<div class="min-w-[80px] min-h-[80px] bg-blue-500"></div>
<p class="text-xl font-bold">Software Solutions</p>
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.78125 0.75L6.25 5.5C6.375 5.65625 6.46875 5.84375 6.46875 6C6.46875 6.1875 6.375 6.375 6.25 6.53125L1.78125 11.2812C1.5 11.5938 1.03125 11.5938 0.71875 11.3125C0.40625 11.0312 0.40625 10.5625 0.6875 10.25L4.6875 6L0.6875 1.78125C0.40625 1.46875 0.40625 1 0.71875 0.71875C1.03125 0.4375 1.5 0.4375 1.78125 0.75Z" fill="#333940" />
</svg>
</div>
<div class="w-full h-52 overflow-hidden shadow-xl p-8 flex items-center justify-start gap-4">
<div class="min-w-[80px] min-h-[80px] bg-blue-500"></div>
<p class="text-xl font-bold pr-0 w-[fit-content]">Business process solutions</p>
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.78125 0.75L6.25 5.5C6.375 5.65625 6.46875 5.84375 6.46875 6C6.46875 6.1875 6.375 6.375 6.25 6.53125L1.78125 11.2812C1.5 11.5938 1.03125 11.5938 0.71875 11.3125C0.40625 11.0312 0.40625 10.5625 0.6875 10.25L4.6875 6L0.6875 1.78125C0.40625 1.46875 0.40625 1 0.71875 0.71875C1.03125 0.4375 1.5 0.4375 1.78125 0.75Z" fill="#333940" />
</svg>
</div>
</div>

Edited
I don't think that this is possible with CSS alone.
See this answer for JS fix: https://stackoverflow.com/a/32222395/4536543
Here's my take on it:
// get list of all spans
list = document.querySelectorAll('.content span');
for (var i=0; i<list.length; i++) {
// retrieve width of span and apply it to parent
w = list[i].offsetWidth;
list[i].parentNode.style.width = w+1+"px"; // need to add 1 because sometimes width is not a whole number and Browser sometimes rounds it down which will trigger layout shift
}
<div style="background: green; width: 134px; position: relative">
<div class="content" style="background: yellow; float: left; max-width: 124px;">
<span style="background: grey">
somewhat long text goes here <!-- this is your "Business process solutions" -->
</span>
</div>
<div style="background: red; width: 10px; display: inline">
>
</div> <!-- this is your arrow -->
</div>

mx-auto for mobile screens otherwise normal flex

folks,
Please, I'm experimenting with TailwindCSS v2.1. It look great, but I cannot find in documentation this problem.
Please, how can I do the mx-auto in flex for the center object for mobile devices (when 2 pictures cannot be beside) but otherwise I want normal behavior. Yes, I can change the main div in every card from
<div class="mt-5 px-2 md:px-5">
to
<div class="mt-5 px-2 md:px-5 mx-auto">
And it's OK but the last card is centered as well when I have bigger screen (odd cards, last one is always centered). But I want center only when all cards are one under second.
One my card:
<!-- First card -->
<div class="mt-5 px-2 md:px-5">
<div class="max-w-xxs rounded-2xl shadow-md overflow-hidden bg-red-700 text-white">
<figure>
<img class="object-scale-down w-96" src="https://zrebec.sk/assets/tt1.jpg" alt="Man looking at item at a store" />
</figure>
<header class="flex m-2 justify-items-start font-semibold">
<div class="inline-flex items-center border-2 border-black w-20 rounded-md mr-2 px-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
</svg>
<span>186</span>
</div>
<div class="inline-flex items-center border-2 border-black w-20 rounded-md px-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.43a2 2 0 00-1.105-1.79l-.05-.025A4 4 0 0011.055 2H5.64a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z" />
</svg>
<span>12</span>
</div>
<div class="flex-auto font-bold w-100 text-right">84%</div>
</header>
<article class="m-2">
<h2>Gold Retro</h2>
<p class="text-gray-300 my-2">The Compact Cassette or Musicassette (MC), also commonly called the tape cassette, cassette tape, audio cassette, or simply tape or cassette, is an analog magnetic tape recording format for audio recording and playback. It was developed by the Dutch company Royal Philips in Hasselt, Belgium, by Lou Ottens and his team. It was introduced in September 1963. Compact Cassettes come in two forms, either already containing content as a prerecorded cassette (Musicassette), or as a fully recordable "blank" cassette. Both forms are reversible by the user.</p>
</article>
<footer class="flex items-center h-10 space-x-1 m-2">
<div class="flex-1 text-center text-xs text-white font-semibold bg-green-500 px-3 py-1 rounded-md">Retro</div>
<div class="flex-1 text-center text-xs text-black font-semibold bg-yellow-500 px-3 py-1 rounded-md">Continuous play</div>
<div class="lex-1 text-center text-xs text-black font-semibold bg-red-500 px-3 py-1 rounded-md">Worse quality</div>
</footer>
</div>
</div>
Whole code from playground is here:
https://play.tailwindcss.com/g2Zso9QsCv
Or here in codepen:
https://codepen.io/littleTheRabbit/pen/jOyzrLb
And please, I don't want use Javascript to block mx-auto for last card. I think that flexbox can do that. Specially with Tailwind CSS. Please, try the TailwindCSS solution if is possible. I can write own CSS but then I don't need Tailwind. I want to discover power of TailwindCSS
PS: I added xss size in the config file (otherwise is standard TailwindCSS Code.

Maybe grid does more of what you want.
<div class="grid md:grid-cols-2 lg:grid-cols-3 justify-items-center max-w-5xl mx-auto">
Check our your example using grid:
https://play.tailwindcss.com/89CSaFNmLi

Add justify-center to
<div class="flex flex-wrap gap-5 justify-center">

What about this one?
Change the cointainer <div> to:
<div class="grid justify-items-center sm:grid-cols-2 md:grid-cols-3 lg:flex lg:flex-wrap">
This causes that I will grid with justify-items-center but in large screens I will have wrapped flexbox. Your opinion please?