Today I add a text in my password label, but when I change de resolution the text don't stay in the same place, please help me. My code:
<div class="flex">
<BreezeLabel for="password" value="Password" />
<Link
:href="route('password.request')"
class="text-sm text-purple-600 hover:text-purple-800 ml-48"
>
Forgot your password?
</Link>
</div>
Some omg to ilustrasse the situation:
fullsize
md
sm
I don't know how Breeze works.
But I think you could use flex in your favor.
If you want the link always on the right side, you can use something like this,
<div class="flex justify-between">
<BreezeLabel for="password" value="Password" />
<Link
:href="route('password.request')"
class="text-sm text-purple-600 hover:text-purple-800"
>Forgot your password?</Link>
</div>
You can check here if this is what you need: https://play.tailwindcss.com/CXsdrXwDDq.
Related
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>
)
My tailwind code behaves really weird. I have a div as a button and I want there an expanding border on hover. My first idea was something like hover:border-2. That doesn't work so I visited tailwind docs to figure it out. Then I put their classes from there border-2 hover:border-t-4 to mine button like this:
<div class="inline-block bg-green-500 p-2 rounded-2xl border-2 hover:border-t-4">Register</div> and the button doesn't respond for hover. When I put this line to the Tailwind playground, surprisingly code works there. Does anyone have an idea what I am doing wrong there? Cheers
<template>
<h1 class="text-2xl font-semibold">Register to use our app fully!</h1>
<div class="login">
<form class="bg-red-400 p-2 max-w-2xl mx-auto">
<div class="flex flex-col items-center">
<input type="text" id="name" placeholder="Nickname" class="m-2 p-1"/>
<input type="text" id="name" placeholder="Password" class="m-2 p-1"/>
<input type="number" id="name" placeholder="Age" class="m-2 p-1"/>
<div class="p-2">
<label for="name">I agree with licensing agreements: </label>
<input type="checkbox" id="name" />
</div>
</div>
<div class="inline-block bg-green-500 p-2 rounded-2xl border-2 hover:border-t-4">Register</div>
</form>
</div>
</template>
It seems you are using tailwind version below v3. As per documentation hover doesn't support border width but supports border color. Check this out https://v2.tailwindcss.com/docs/hover-focus-and-other-states#hover
But it supports border width in v3. Try changing version in tailwind playground with your code and see if it works
I'm implementing a Jumbotron element like this:
<div className="jumbotron">
<div>
<h6 className="display-6">Reset Password</h6>
<p className="lead">We've just emailed you password reset instructions at <u>{this.email && this.email}</u></p>
<hr className="my-4" />
</div>
</div>
Unfortunately, the content overflows the jumbotron, like this:
How do I fix this?
EDIT: Here's another one. The compiled HTML appears like this in my browser:
<div class="container">
<div class="jumbotron">
<h6 class="display-6">Activate account</h6>
<p class="lead"><!-- react-text: 215 -->Please confirm the verification code we've just emailed you at <!-- /react-text --><u>b_kogan#hotmail.com</u></p>
<button class="btn btn-primary">Resend email verification code</button>
</div>
</div>
And, again, it's overflowing:
Here is a quick example of what you have in your HTML and with using bootstrap 4 and everything looks as expected,I think you have different style applied or this is not the rendered html on the browser.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div>
<h6 class="display-6">Reset Password</h6>
<p class="lead">We've just emailed you password reset instructions at <u>{this.email && this.email}</u></p>
<hr class="my-4" />
</div>
</div>
I have a popover code that is working fine. However when the popover is inside a div, then it stops working.
<section class="content-section">
<h2>What Are They?</h2>
//this popover is working
<p>Also known as <span class="glossary-term-pop" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="(aka Research community) pronounced 'M-Rock'. One of the terms used for a research community." title="" data-original-title="MROC (Market Research Online Community)">MROCs</span> (Market Research Online Community) the commun only, Webs.</p>
</section>
<hr />
<section class="content-section">
<h2>Pros and Cons</h2>
<section class="tabs" style=' margin-top:15em;'>
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1">Pros</label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2">Cons</label>
<div class="content less-stuff">
<div class="content-1">
<h3>Pros</h3>
//this popover is NOT working
<p>Communities are usually larger than any set of <span class="glossary-term-pop" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="(aka Focus Group Interview or Group D with fewer participants - possibly 4-6." title="" data-original-title="Focus Group">focus groups</span>. This can allow minority opin-minded participants to take place - rich data that would never emerge in a focus group setting.</p>
</div>
<div class="content-2">
<h3>Cons</h3>
<p>Qualitative-nflection is lost.</p>
</div>
</div>
</section>
</section>
Here is the JSFIDDLE: https://jsfiddle.net/erkaner/46awL808/2/
You will see two words with blue background, first one is showing popover, but second one is not.
Does anyone have any idea how to resolve this issue?
It's side effects of your css selector.
Updated fiddle
Just use the right selector on your markup, I just replace section.tabs .content div with section.tabs .content > div, then it worked.