I have a component where the generated HTML is for a simplistic bar chart. The height and background colour are computed in the component. This works fine but I want to solve the issue of long text causing displacement of the bar above it.
There is also the issue of the width of the bars wrongly depending on the width of the text too, but that's probably another post.
Chart when viewport is wide enough:
Chart when viewport is smaller (this is the problem I wish to solve):
I think the rest of the bars and their labels need offsetting?
<ul class="flex gap-3 items-end">
<li class="flex flex-col flex-grow gap-1 content-center">
<span style="height:42.666666666666664px;background-color:#d73027" title="Apple - 10">
</span>
<div class="text-sm text-center">Apple</div>
</li>
<li class="flex flex-col flex-grow gap-1 content-center">
<span style="height:128px;background-color:#f46d43" title="Very Long Banana - 30">
</span>
<div class="text-sm text-center">Very Long Banana</div>
</li>
<li class="flex flex-col flex-grow gap-1 content-center">
<span style="height:64px;background-color:#fdae61" title="Orange - 15">
</span>
<div class="text-sm text-center">Orange</div>
</li>
<li class="flex flex-col flex-grow gap-1 content-center">
<span style="height:106.66666666666667px;background-color:#fee08b" title="Grape - 25">
</span>
<div class="text-sm text-center">Grape</div>
</li>
</ul>
</div>
As someone mentioned in the comments, there are various ways to solve the issues, this is just one way.
Edit: See #MagnusEffect's answer for a much simpler option.
If you want to keep your layout as it is, i.e., using an unordered list as a container for both the bars and the labels, you can wrap all bars with a fixed size div for the vertical alignment. Otherwise you could divide the bars and the labels in two different rows with equally sized items. I positioned the items within the wrapper divs using absolute positioning of the children, you can use flex box here as well.
You can use flex-basis together with word-wrap for equal widths across the flex items. Some kind of overflow for the text can be an alternative to word-wrap.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<ul class="flex gap-3 items-start" style="width: 270px; resize: both; overflow: auto; border: 1px solid black">
<li class="flex flex-col basis-0 flex-grow gap-1">
<div class="relative" style="height: 128px;">
<span class="absolute w-full bottom-0" style="height:42.666666666666664px;background-color:#d73027" title="Apple - 10"></span>
</div>
<div class="text-sm text-center" style="word-wrap: anywhere;">Apple</div>
</li>
<li class="flex flex-col basis-0 flex-grow gap-1">
<div class="relative" style="height: 128px">
<span class="absolute w-full bottom-0" style="height:128px;background-color:#f46d43" title="Very Long Banana - 30"></span>
</div>
<div class="text-sm text-center" style="word-wrap: anywhere;">Very Long Banana</div>
</li>
<li class="flex flex-col basis-0 flex-grow gap-1">
<div class="relative" style="height: 128px">
<span class="absolute w-full bottom-0" style="height:64px;background-color:#fdae61" title="Orange - 15"></span>
</div>
<div class="text-sm text-center" style="word-wrap: anywhere;">Orange</div>
</li>
<li class="flex flex-col basis-0 flex-grow gap-1">
<div class="relative" style="height: 128px">
<span class="absolute w-full bottom-0" style="height:106.66666666666667px;background-color:#fee08b" title="Grape - 25"></span>
</div>
<div class="text-sm text-center" style="word-wrap: anywhere;">Grape</div>
</li>
</ul>
</body>
</html>
As mentioned , since you are using items-end , it is using the end (text) to align the object.
Replace it with items-baseline class and also add flex-row to the <ul>.
So the code looks like this
<ul class="flex gap-3 flex-row items-baseline">
<li class="flex flex-col flex-grow gap-1 content-center">
<span style="height:42.666666666666664px;background-color:#d73027" title="Apple - 10">
</span>
<div class="text-sm text-center">Apple</div>
</li>
<li class="flex flex-col flex-grow gap-1 content-center">
<span style="height:128px;background-color:#f46d43" title="Very Long Banana - 30">
</span>
<div class="text-sm text-center">Very Long Banana</div>
</li>
<li class="flex flex-col flex-grow gap-1 content-center">
<span style="height:64px;background-color:#fdae61" title="Orange - 15">
</span>
<div class="text-sm text-center">Orange</div>
</li>
<li class="flex flex-col flex-grow gap-1 content-center">
<span style="height:106.66666666666667px;background-color:#fee08b" title="Grape - 25">
</span>
<div class="text-sm text-center">Grape</div>
</li>
</ul>
</div>
You can check the demonstration here on tailwind play
Please try to add the CSS for the text using VW method.
Example: font-size: 16vw;
Please check below reference link:
https://css-tricks.com/viewport-sized-typography/
Related
I am using the #tailwindcss/line-clamp plugin to clamp a text element (<span>) to one line (line-clamp-1). The text element is inside a flex box, and is followed by another text element that's supposed to "stick" to its right side.
My problem is that the width of the clamped text element is not computed properly. Even though the text is clamped correctly, the width of the element remains too wide and the following text does not "stick" closely like I want to.
Below is a screenshot. The "problem element" is the one that says "Human-Computer Interaction". It should look like the others, where the "post count" in parentheses "sticks" closely to the topic label.
Here is my code:
{{#foreach tags}}
<a class="flex flex-row gap-1" href="{{url}}">
<span class="text-neutral-200 line-clamp-1"> {{name}}</span>
<span class="text-neutral-500"> ({{count.posts}})</span>
</a>
{{/foreach}}
How does one reduce the width of the clamped text element to fit the clamped text inside?
P.S. I have tried replacing <span>s with <p> elements, and using other CSS approaches that don't involve the line-clamp plugin, and have not found a solution so far.
There is no need to use an extra package because you only one have line and for achieve you can use text-overflow property with white-space and overflow to get the same result.
You can use it as inline or create you own class with #layer.
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
#layer utilities { .ellip { #apply overflow-hidden text-ellipsis whitespace-nowrap; } }
</style>
<div class="grid grid-cols-4 gap-6 bg-black">
<div class="flex flex-col">
<a class="flex flex-row gap-1" href="/#">
<span class="overflow-hidden text-ellipsis whitespace-nowrap text-neutral-200"> Music</span>
<span class="text-neutral-500"> (7)</span>
</a>
<a class="flex flex-row gap-1" href="/#">
<span class="overflow-hidden text-ellipsis whitespace-nowrap text-neutral-200"> Architecture</span>
<span class="text-neutral-500"> (2)</span>
</a>
<a class="flex flex-row gap-1" href="/#">
<span class="overflow-hidden text-ellipsis whitespace-nowrap text-neutral-200"> Graphic Design</span>
<span class="text-neutral-500"> (10)</span>
</a>
<a class="flex flex-row gap-1" href="/#">
<span class="overflow-hidden text-ellipsis whitespace-nowrap text-neutral-200"> Human-Computer Interaction </span>
<span class="text-neutral-500"> (5)</span>
</a>
</div>
<div class="flex flex-col">
<a class="flex flex-row gap-1" href="/#">
<span class="text-neutral-200 ellip"> Human-Computer Interaction</span>
<span class="text-neutral-500"> (7)</span>
</a>
<a class="flex flex-row gap-1" href="/#">
<span class="text-neutral-200"> Art</span>
<span class="text-neutral-500"> (4)</span>
</a>
<a class="flex flex-row gap-1" href="/#">
<span class="text-neutral-200 ellip"> Education</span>
<span class="text-neutral-500"> (5)</span>
</a>
<a class="flex flex-row gap-1" href="/#">
<span class="text-neutral-200 ellip"> Graphic Design</span>
<span class="text-neutral-500"> (10)</span>
</a>
</div>
</div>
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
So i have been working on a project. But Clicking on Footer link hides the title portion of the id like the 2nd image . is there any way to show it like the 3rd pic . Tried adding padding top to the id element still not working. Showing this
Want to show like this
My Footer Code
<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<!-- Body -->
<div class="w-full px-4 md:w-1/3">
<h2 class="mb-3 text-2xl tracking-widest title-font text-textC font-futuraB">
TOP SERVICES</h2>
<ul class="mb-10 list-none font-futuraL">
<li class="py-0.5">
Brand strategy
</li>
<li class="py-0.5">
Identity Design
</li>
<li class="py-0.5">
Marketing & Development
</li>
<li class="py-0.5">
<a rel="noopener noreferrer" href="http://ignition.brandheft.com/" class="text-textAltC hover:text-accentC">Printing Services</a>
</li>
</ul>
</div>
Div Element having the issue
<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<!-- Body -->
<div class="flex flex-wrap justify-center mx-auto lg:w-4/5 service_container_1" id="strategy">
<div class="order-first object-cover object-center rounded lg:w-1/2">
<img class="w-full h-72 lg:h-auto service_img_1" src="https://via.placeholder.com/300.jpg">
</div>
<div class="w-full my-auto mb-6 text-center lg:w-1/2 lg:pr-10 lg:py-6 lg:mb-0 font-futuraM lg:text-left">
<h1 class="pt-12 mb-4 text-5xl font-medium text-textC">Brand Strategy</h1>
<p class="mb-4 text-base leading-relaxed lg:text-lg text-textAltC first-letter:text-accentC first-letter:text-xl lg:first-letter:text-2xl font-futuraL">Whether you want to be remembered by your customers, connect with your audience, or increase the prices of your products by showing them the value, you need to differentiate yourself from your competitors. Differentiating doesn't always mean providing
a totally different product or service. Differentiating means adding a little something extra that'll make a huge impact. That naturally comes from your vision but you need to mine it using a proper brand strategy. A brand strategy encompasses your
company's mission, promises to your customers, and a plan to communicate the same to your audience. Here's how we can help you draft a successful brand strategy.</p>
<div class="space-y-2">
<div class="flex flex-col justify-between space-y-2 lg:space-y-0 lg:flex-row">
<span class="text-accentC">Brand purpose</span>
<span class="text-accentC">Target audience</span>
</div>
<div class="flex flex-col justify-between space-y-2 lg:space-y-0 lg:flex-row">
<span class="text-accentC">Brand attributes</span>
<span class="text-accentC">Brand book</span>
</div>
<div class="flex flex-col justify-between space-y-2 lg:space-y-0 lg:flex-row">
<span class="text-accentC">Brand mission statement</span>
<span class="text-accentC">Brand voice</span>
</div>
<div class="flex flex-col justify-between space-y-2 lg:space-y-0 lg:flex-row">
<span class="text-accentC">Brand personality</span>
<span class="text-accentC">Brand kit</span>
</div>
</div>
<div class="flex mt-10">
Get a Quote
</div>
</div>
</div>
LIVE WEBSITE
Im using tailwind css by the way. How can i auto <br> this text where it just goes to the next line after certain width
<div class="w-0 flex-1 flex items-center overflow-y-auto max-w-full">
<label class="font-thin font-semibold text-yellow-300">||</label>
<span class="ml-2 flex-1">Large text that would normally need <br></span>
</div>
full thing
<div class="flex flex-col bg-white px-8 py-6 max-w-sm mx-auto rounded-lg shadow-md overflow-y-auto">
<ul class="border border-gray-200 rounded-md divide-y divide-gray-200">
<li class="pl-3 pr-4 py-3 text-sm">
<div class="block flex-1 flex items-center overflow-y-auto max-w-full">
<label class="font-thin font-semibold text-yellow-300">||</label>
<span class="ml-2 flex-1 block overflow-y overflow-x-hidden" style="display: block;">
resume_back_end_developer.pdfskmaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</span>
</div>
</li>
</li>
</ul>
</div>
I believe what you're looking for is break-words. It will add line breaks after a certain length, even breaking words if needed.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="flex flex-col bg-white px-8 py-6 max-w-sm mx-auto rounded-lg shadow-md overflow-y-auto">
<ul class="border border-gray-200 rounded-md divide-y divide-gray-200">
<li class="pl-3 pr-4 py-3 text-sm">
<div class="flex-1 flex items-center overflow-y-auto max-w-full">
<label class="font-semibold text-yellow-300">||</label>
<span class="ml-2 flex-1 block overflow-y overflow-x-hidden break-words"> resume_back_end_developer.pdfskmaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </span>
</div>
</li>
</ul>
</div>
To not mess up other <span> elements, add a custom class to that specific span. In my sample I added the class br: <span class="ml-2 flex-1 br">
Next I add this for the css: .br { display: block; }. That will change the span with the class brto change from inline-element to a block level element. As such a linebreak behavior will happen by default.
.br {
display: block;
}
<div class="w-0 flex-1 flex items-center overflow-y-auto max-w-full">
<label class="font-thin font-semibold text-yellow-300">||</label>
<span class="ml-2 flex-1 br">Large text that would normally need <br></span>
</div>
I have a section with the following contents:
<section class="flex flex-wrap -mx-2">
<Card
v-for="(course, index) in courses"
:key="index"
:title="course.title"
:professor="course.professor"
:price="course.price"
:excerpt="course.excerpt"
:image="course.image"
:category="course.category"
/>
</section>
A Card looks like this:
<article class="bg-red mt-5 px-2 w-full md:w-1/2 lg:w-1/3 xl:w-1/3 shadow-md rounded bg-white">
<nuxt-link to="/courses/example-course">
<img :src="`/images/${image}`" :alt="title" class="rounded-t w-full">
</nuxt-link>
<div class="p-4">
<header class="flex justify-between">
<section>
<h3 class="text-gray-700">
<nuxt-link to="/courses/example-course" class="hover:text-gray-600" v-text="title"></nuxt-link>
</h3>
<p class="text-gray-600 mt-1" v-text="professor"></p>
</section>
<div v-if="price">
<span class="px-2 py-1 bg-green-200 text-green-500 font-bold rounded">${{ price }}</span>
</div>
</header>
<article class="text-gray-700 mt-2" v-text="excerpt"></article>
</div>
<footer class="border-t border-gray-300 uppercase p-5 flex justify-between">
<span class="text-gray-600 text-xs font-bold self-center" v-text="category"></span>
<a href="#" class="text-gray-600 hover:text-blue-600">
<i v-if="price" class="fa fa-user"></i>
</a>
</footer>
</article>
And the outcome of all this looks like this:
As you can see, the cards are touching each other, despite me following what the Tailwind's docs say on grid spacing. I have tried adding ml-2 on the <article> tags, but that just results in wrapping the element prematurely and leaving out too much space.
What am I doing wrong here and how to add a gap between the cards? Thanks!
The "problem" with margin is that it lives on the outside of the box(model) of your element, e.g. it affects the total width of your card. For example on large screens you want them to be 33.33% wide, but if you add margin on the left/right, the card will have a width of 33.33% + margin which makes the flexbox container wrap after two items because otherwise the total width would be more than 100%. You can solve this by a) setting things to box-sizing: border-box (doesn't help with margin tough!) and b) use padding instead of margin to create the gaps, this usually requires some kind of wrapper around your content that does nothing else than dealing with spacing and sizing, something like this:
<article class="mt-5 px-2 w-full md:w-1/2 lg:w-1/3 xl:w-1/3">
<div class="card bg-red shadow-md rounded bg-white">
<nuxt-link to="/courses/example-course">
<img :src="`/images/${image}`" :alt="title" class="rounded-t w-full">
</nuxt-link>
<div class="p-4">
<header class="flex justify-between">
<section>
<h3 class="text-gray-700">
<nuxt-link to="/courses/example-course" class="hover:text-gray-600" v-text="title"></nuxt-link>
</h3>
<p class="text-gray-600 mt-1" v-text="professor"></p>
</section>
<div v-if="price">
<span class="px-2 py-1 bg-green-200 text-green-500 font-bold rounded">${{ price }}</span>
</div>
</header>
<article class="text-gray-700 mt-2" v-text="excerpt"></article>
</div>
<footer class="border-t border-gray-300 uppercase p-5 flex justify-between">
<span class="text-gray-600 text-xs font-bold self-center" v-text="category"></span>
<a href="#" class="text-gray-600 hover:text-blue-600">
<i v-if="price" class="fa fa-user"></i>
</a>
</footer>
</div>
</article>
I know it is kind of annoying to clutter up the markup like that, but its usually worth it =).
EDIT: It is actually as the docs say
Add a negative horizontal margin like -mx-2 to your column container and an equal horizontal padding like px-2 to each column to add gutters.
your issue is with the box-shadow that then doesn't let you create a visual gap, so technically you need the wrapper because of your box-shadow!