There is a label with pseudo circle:
<label _ngcontent-bfw-c43="" class="block text-black font-medium before:inline-block before:w-2 before:h-2 before:mr-5 before:align-middle before:bg-red-500 before:rounded-full">Name of company</label>
Problem is that if text is not fit by with it breakes to the next line.
::before has margin-left. How to break the text with this margin?
Is this what you mean? test it and see :
I inserted the label inside a div so I can make that circle outside the text so I can control the circle's position absolute without moving the text with it.
<script src="https://cdn.tailwindcss.com"></script>
<div class="w-screen h-screen ">
<div class="before:absolute before:top-2 before:left-1 ml-6
text-black font-medium before:inline-block before:w-2 before:h-2
before:mr-5 before:align-middle before:bg-red-500 before:rounded-full">
<label _ngcontent-bfw-c43="sdfds" class=" ">
Name of companyName of companyName of companyName of companyName of companyName of company
</label>
</div>
</div>
Related
I'm trying to vertically align the placeholder of the third input field. Assuming that "text-start" and "text-end" classes when used with placeholder modifier in tailwind vertically align the placeholder text. But weirdly, in my case, "text-start" & "text-end" are doing the same as "text-left" & "text-right" respectively.
<div class="flex flex-col space-y-8">
<div class="flex flex-col space-y-4 w-[540px]">
<input class="placeholder-Eerie-Black text-[13px] font-normal tracking-[0px] leading-[15px] bg-Amber border-2 border-opacity-50 border-Eerie-Black rounded-lg h-[50px] p-2" placeholder="Name and Surname*">
<input class="placeholder-Eerie-Black text-[13px] font-normal tracking-[0px] leading-[15px] bg-Amber border-2 border-opacity-50 border-Eerie-Black rounded-lg h-[50px] p-2" placeholder="Email*">
<input class="placeholder:text-end placeholder-Eerie-Black text-[13px] font-normal tracking-[0px] leading-[15px] bg-Amber border-2 border-opacity-50 border-Eerie-Black rounded-lg h-[98px] p-2 text-start" placeholder="Please provide as much detailed information as possible. Thank you *">
</div>
<button class="bg-Green w-[210px] h-[50px] rounded-lg">SUBMIT MESSAGE</button>
</div>
After doing a bit of research about the issue, I got to know that adding class placeholder:-translate-y-6
fixes this bug. But still curious why the above mentioned classes aren't doing this.
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.
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 have this card
<div class="card">
<div class="card-body">
<div class="ct">
Health & safety
</div>
<div class="facetHolder mt-3">
<div class="row">
<div class="col-md-9">
<input type="checkbox" /><span class="ml-3 dtext">Properties with additional health & safety measures</span>
</div>
<div class="col-md-3">
<span class="badge badge-primary float-right">10</span>
</div>
</div>
</div>
</div>
</div>
and this is the fiddle https://jsfiddle.net/dzfo41rk/5/
This is how it looks
The text on the right moves too much to the left and occupies the empty space not occupied by the checkbox.
I tried setting the whitespace
.dtext{
font-size:14px !important;
white-space:normal !important;
word-wrap: normal !important;
}
but that is not helping. How can i ensure the text do not overflow to the left to occupy space around the checkbox?
Use label instead of span
Wrap both label and the input with another element.
Use .form-check
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label ml-3 dtext" for="exampleCheck1">
Properties with additional health & safety measures
</label>
</div>
https://jsfiddle.net/odr04tsj/
For more info, read Checkboxes and radios
https://getbootstrap.com/docs/4.6/components/forms/#checkboxes-and-radios
I think you're looking for the property white-space: nowrap; on any text containers. This will prevent the line breaks & force the text to one line.
You need to put your text and checkbox in different columns of row. As now, checkbox with inline-block style looks like a part of text.
Other problem is big paddings of columns. Create them smaller with p-classes or change them with your stylesheets.
And the third thing, as epascarello said, you need labels for the checkboxes.
<div class="col-md-3 px-1">
<input type="checkbox" id="stackCheck"/>
</div>
<div class="col-md-9 px-1">
<label for="stackCheck" class="dtext">
Properties with additional health & safety measures
</label>
</div>
Look at the fiddle: https://jsfiddle.net/7Lfbmj6t/1/
And please, don't use !important without necessary.
How do I center the form inputs in this image? I'm using the GridLayout defined here: https://www.matblazor.com/LayoutGrid using form elements defined here https://www.matblazor.com/EditContext
This is my attempt but i must be missing something:
<div class="container login-layout mat">
<MatCard>
<MatCardContent>
<EditForm Model="Login" OnValidSubmit="Success">
<div class="mat-layout-grid">
<div class="mat-layout-grid-inner">
<div class="mat-layout-grid-cell mat-layout-grid-cell-span-12">
<MatH2>Login</MatH2>
</div>
<div class="mx-auto
mat-layout-grid-cell
mat-layout-grid-cell-span-12">
<MatTextField ValidationDisabled="true" Label="Username" #bind-Value="Login.Username" />
<MatTextField ValidationDisabled="true" Type="Password" Label="Password" #bind-Value="Login.Username" />
</div>
<div class="mat-layout-grid-cell mat-layout-grid-cell-span-12">
<MatButton class="float-right">Log in</MatButton>
#*<MatButton class="float-right" #onclick="OnLoginClick">Log in</MatButton>*#
</div>
</div>
</div>
</EditForm>
<div class="container">
<MatCaption>Need an account? </MatCaption>
<MatButton class="float-right aslkjd-c0ass" #onclick="OnSignUp">Sign up</MatButton>
</div>
</MatCardContent>
</MatCard>
</div>
mx-auto or say margin auto in x axis work in div if you provide it a width or max-width. try using it on input field itself or try giving div a width or you can use flex justify content: center and flex-direction: column on the div