I am making a html based tag filter based on tailwind.
<div class="p-3 border-b">
<div class="flex flex-col space-y-2 mt-2">
<div class="flex flex-row space-x-2 text-sm" v-for="(filter,index) in filters" :key="index">
<div class="w-16 text-base text-gray-700"> {{ filter.label }} </div>
<div class=" flex flex-row space-x-5 text-gray-500 leading-6">
<span class="cursor-pointer"> {{ categoryItem.name }} </span>
</div>
</div>
</div>
</div>
filters:[
{
name:'type',
label:'Type',
category:[
{'name':'All'},
{'name':'Animals, Plants & Land'},
{'name':'Maintenance, Service & Repair'},
{'name':'Management & Planning'},
{'name':'Medical Technology'},
{'name':'Transport'},
{'name':'Storage, Dispatching & Delivery'},
{'name':'Retail Sales & Customer Service'},
{'name':'Medical Technologyy'},
....
]
}
],
However since the number of category list is more than 30 items, the actual html page looks very wired since the tag list grows horizontally instead of breaking space into multiple lines.
how to deal with this?
You can check out the Tailwind CSS line clamp package to solve this problem.
Here is a link on how to use it.
Related
In a vuejs app, I have a component that is loaded while waiting for reply from the api.
It contains a simple blurred line (no props or events). I want to load that same component every half second additionnaly, i.e. it starts with one line, half a second later a second line, after another half second the third line and so on.
<TheLoadingLine />
TheLoadingLine contains:
<template>
<div class="flex flex-row justify-between md:mb-4 blur-sm ">
<div class="grow flex flex-col md:flex-row justify-between text-bleulfdm pl-6 pr-4 p-1 mb-1 shadow-md xl:rounded-full shadow-bleutresclair text-sm xl:text-lg">
<div class="flex flex-row w-full">
<span class="basis-12 md:basis-24">2 janv</span>
<span class="md:basis-72 ">intitule</span>
<span class="inline-block">catégorie</span>
</div>
<div>
<div class="flex flex-row justify-between" >
<div></div>
<div class="font-bold lg:font-normal">10€</div>
</div>
</div>
</div>
</div>
</template>
I thought of a function with a setInterval, something like:
let timer = setInterval(load_component_function, 500)
But I have no real clue of what to put in such a function and how to implement that.
It is simple. To show component in Vue you use v-if or v-show so you just need a proper condition.
<TheLoadingLine v-if="counter > 0" />
<TheLoadingLine v-if="counter > 1" />
<TheLoadingLine v-if="counter > 2" />
Just increase a counter by one in a setInterval callback
You can also use a v-for:
<TheLoadingLine v-for="c in counter" :key="c" />
I'm using tailwind and Vue to make some reusable toggle component. Border of component is gray color, but plan is when I click on component, border will be red like on a image below (I'm using/trying using focus).
Problem is because I can use focus just on input and button, but I need focus on div tag
I have one div, inside is two paragraph and one input (type:checkbox). I tried with tabindex and it doesn't work, when I click in checkbox or input field (gray button) it doesn't focus. Only focuses when I click inside a component but not in checkbox field.
Code is
<template>
<div>
<div tabindex="1"
class="relative border border-gray-300 px-10 max-w-md mx-auto my-2 cursor-pointer rounded-lg px-5 py-4 rounded-lg border bg-white transition duration-150
ease-in-out placeholder:text-zinc-400 hover:bg-zinc-100 focus:border-transparent
focus:outline-none focus:ring disabled:opacity-50 motion-reduce:transition-none
dark:bg-zinc-900 dark:placeholder:text-zinc-500 dark:hover:bg-zinc-800" :class="[ error
? 'border-red-500 caret-red-500 focus:ring-red-500/50'
: 'border-zinc-300 caret-primary focus:ring-primary/50 dark:border-zinc-600 dark:focus:border-transparent',
]"
>
<div class="flex justify-between">
<div>
<h1 class="text-md font-semibold text-black">
{{ titleToggle }}
</h1>
<p class="inline text-md text-gray-500">
{{ subtitleToggle }}
</p>
</div>
<label class="switch my-auto">
<input
:value="toggleSwitch"
v-bind="$attrs" type="checkbox"
class="rounded-lg " :class="[
error
? 'border-red-500 caret-red-500 focus:ring-red-500/50'
: 'border-zinc-300 caret-primary focus:ring-primary/50
dark:border-zinc-600 dark:focus:border-transparent',]" #click="updateInput"
>
<span :class="[toggleSwitch ? 'bg-red-500 border-red-500' : 'bg-gray-300 border-gray-300',
]" class="slider round absolute cursor-pointer inset-0 border rounded-full"
/>
</label>
</div>
</div>
</div>
</template>
Is anyone have advice, or maybe different way how to do it ?
I don't really understand your question, but you may have a look at this from the tailwind documentation :
focus-within (:focus-within) : Style an element when it or one of its descendants has focus using the focus-within modifier:
<div class="focus-within:shadow-lg ...">
<input type="text" />
</div>
https://tailwindcss.com/docs/hover-focus-and-other-states#focus
I am using Bootstrap to design my React project and all of a sudden the grid system doesn't work properly.Basically I need to have the first div with the className of row above the Card components, and centered.I have added more code but nothing that had to do with that particular main page or styling.I have pasted below my code.Does anyone know why this could've happened and how to fix it?
return (
<div>
<section id="service">
<div className='container'>
<div className='row'>
<div className='col-12'>
<h3 className='fs-5 text-center mb-0'>Our Services</h3>
<h1 className='display-6 text-center mb-4'>Our <b>Awesome</b> Services</h1>
<hr className='w-25 mx-auto'/>
</div>
</div>
<div className='row'>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Easy Usage' content='Access your assigned task with only one click and start testing your code right now.'/>
</div>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Instant Feedback' content='Run your solution using only one submit button with the help of our online compiler.'/>
</div>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Optimize your time' content='Reduce your time spending on uploading assignments with our easy dashboard method.'/>
</div>
</div>
</div>
</section>
</div>
)
This puzzles me a lot. I'm writing a Laravel application, and I want to draw a circle besides a description. The circle must be either gray or yellow depending on a condition, so my code is:
...
<ul>
#foreach ($section->lessons as $lesson)
<li class="flex items-start mb-1">
<span class="inline-block w-4 h-4 mt-1 mr-2 {{ $lesson->complete ? 'bg-yellow-400' : 'bg-gray-500' }} rounded-full"></span>
<a
class="cursor-pointer"
wire:click="changeLesson({{ $lesson }})"
>{{ $lesson->name }}</a>
</li>
#endforeach
</ul>
...
This code works, no problem with it, but with the display. Check the span Tailwind classes: "inline-block w-4 h-4 mt-1 mr-2 bg-yellow-400 }} rounded-full", this should draw a perfect circle (w-4 h-4) right?
Now see what it displays:
As you can see, for the one line descriptions, the circle is perfect, but for the ones that have two lines, it becomes sort of an oval, and it moves the margin slightly to the left
Why this happens and how can I fix it?
You have a flex container so you don't need inline-block on the spans but flex is also the reason your long line span element is getting squashed.
A simple fix is to add flex-shrink-0 to those spans.
Here it is working on Tailwind Play https://play.tailwindcss.com/H0kZFOVNaX
<ul>
<li class="flex items-start mb-1">
<span class="w-4 h-4 mt-1 mr-2 bg-gray-500 rounded-full"></span>
<a
class="cursor-pointer"
wire:click="changeLesson({{ $lesson }})"
>Some regular sized content</a>
</li>
<li class="flex items-start mb-1">
<span class="w-4 h-4 flex-shrink-0 mt-1 mr-2 bg-gray-500 rounded-full"></span>
<a
class="cursor-pointer"
wire:click="changeLesson({{ $lesson }})"
>Some extra large XXXL sized content that has way too long of a title and can smash an inline element.</a>
</li>
</ul>
I have the following code:
<h2 id="yachts" class="mt-0">Our Yachts</h2>
<div class="card-group">
{{ $pages := sort (where $.Site.RegularPages "Section" "boats") "Weight" "asc" }}
{{ range $pages }}
<div class="card">
<img src="{{ .RelPermalink | safeCSS }}{{ .Params.heroimage | safeCSS }}" class="card-img-top" alt="...">
<div class="card-body clearfix">
<h4 class="card-title">{{ .LinkTitle }}</h4>
<p class="card-text border-light border-top border-bottom">
<span class="row">
<span class="col-6 text-muted text-left">
{{- partialCached "icons/users.svg" . -}}{{ .Params.pax }}
</span>
<span class="col-6 text-muted text-right">
{{- partialCached "icons/bed.svg" . -}}{{ .Params.bunks }}
</span>
</span>
</p>
<p class="card-text">{{ .Description }}</p>
Learn More
</div>
</div>
{{ end }}
</div>
(The logic stuff inside of the {{ tags is Hugo templating markup (Golang) which is irrelevant at this point).
The result of this code looks like this in one of the uses:
I would like to position the buttons on the same level (bottom right of each card).
I tried doing it via position relative on the card and position absolute on the buttons, but that positions them at their current location, not the real bottom of the card. What would be the "flex way" to tell these buttons where they belong?
Try min-height for .card-text
.card-text{
min-height:250px;
}
It turns out that Bootstrap offers the card-footer class that does exactly what I wanted to achieve. Using bg-light or our own class for styling then can make it look right.
<div class="card-footer bg-light">
Learn More
</div>
From the documentation:
When using card groups with footers, their content will automatically line up.