Consider the following, in a blade template:
<template x-for="(product, index) in getProducts()" :key="index">
<li class="flex items-center px-1 py-3 rounded-md hover:bg-gray-50">
<label class="flex items-center justify-between hover:cursor-pointer">
<input type="checkbox" name="products[]" x-bind:value="product.id" class="cursor-pointer form-checkbox" {{ $attributes->wire('model') }} />
</label>
[..]
</li>
</template>
I'm using it as follow:
<x-forms.product-selector wire:model.lazy="activeProducts" />
When playing with checkboxes, nothing happens (i.e no event is fired for livewire).
Would anyone have an idea of what I'm doing wrong ?
Thanks
wire:model doesn't work inside template
https://github.com/livewire/livewire/issues/919
Related
In a vuejs app and using tailwindcss, I have a strange behaviour on my button:
this is the template code:
<div
:class=" [ bubbled ? 'text-vert' : 'text-grisee' ] "
#click = "togglebubbled()"
class="mt-6"
>
<FontAwesome icon="soap" class="lg:text-lg mr-4 lg:mr-0" />
<span class="ml-2" >Rappel mois prochain</span>
</div>
<div class="w-fit m-auto">
<FormButton :disabled="disabled">Envoyer</FormButton>
</div>
And the FormButton template :
<div>
<button
type="submit"
class="mt-6 px-5 py-3 drop-shadow-2xl hover:drop-shadow-none transition ease-in-out duration-300 rounded leading-snug whitespace-nowrap text-base font-semibold text-blanc"
:class="[disabled ? 'bg-grisee' : 'bg-bleulfdm hover:bg-marron']"
:disabled="disabled"
>
<slot></slot>
</button>
</div>
I have no explanation or solution for this effect, which is flickering, sometimes showing button correctly, sometimes leaking
I've been trying to build this UI for almost a day.
I'm just stuck with not getting the middle div in the center of the screen and the last Copyright div align to the bottom of the screen. I'm a mobile dev first, just started out styling on web. This is what I've managed to build so far, ignore rest of the UI, I can do that part. Here's the sandbox for my code as well : https://codesandbox.io/s/tailwind-css-and-react-forked-v9c22d?file=/src/App.js:140-2801
<div className="bg-background-light dark:bg-background-dark h-screen w-full">
<div>
<img
src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a"
className="h-24 w-24 mt-9 ml-9"
/>
<div className="flex justify-center items-center h-fit">
<div className="flex flex-col items-start">
<div className="text-4xl text-black">Admin Dashboard</div>
<div className="text-login-subtitle-light dark:text-login-subtitle-dark mt-6">
Enter your email and password to sign in
</div>
<label className="dark:text-white text-text-color-primary-light mt-6">
Email
</label>
<input
placeholder="Email"
className="w-full rounded font-thin px-5 py-3 mt-4"
autoFocus
type="email"
required
/>
<label className="dark:text-white text-text-color-primary-light mt-6">
Password
</label>
<input
placeholder="Password"
id="password"
className="w-full rounded font-thin px-5 py-3 mt-4"
autoFocus
type="password"
required
/>
<label
for="default-toggle"
class="inline-flex relative items-center cursor-pointer"
>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 mb-5"></div>
<input
type="checkbox"
value=""
id="red-toggle"
class="sr-only peer"
checked
/>
<span class="ml-3 text-sm font-medium text-text-color-primary-light dark:text-white mb-5">
Remember me
</span>
</label>
<button
className="text-white bg-red-900 h-16 rounded-xl w-full text-xl"
type="submit"
>
Sign In
</button>
<div className="text-black dark:text-white">
© Example Technologies Pvt. Ltd.
</div>
</div>
</div>
</div>
</div>
Problem highlight, as you can see the second div starts as soon as the image ends
After adding your code and when I scroll, so when we add a bottom padding to the copyright view, it creates a white bg when I open the console, is this the expected behaviour?
You need to set the logo and the copyright absolute. The copyright can you stick to the bottom and left and right side with bottom-0 left-0 right-0, and center the text with text-center.
Then, you need to add flex to the parent div, and then m-auto to the div with the fields. This will center the div horizontal and vertical on the page (in the main div). I also set a background on it so you can see the div, but that is not necessary of cause.
Here is the code:
import React from "react";
import "./styles.css";
import "./styles/tailwind-pre-build.css";
export default function App() {
return (
<div className="relative flex bg-background-light dark:bg-background-dark h-screen w-full">
<img
src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a"
className="absolute h-24 w-24 mt-9 ml-9"
/>
<div className="m-auto bg-gray-500 rounded-lg p-8">
<div className="flex justify-center items-center h-fit">
<div className="flex flex-col items-start">
<div className="text-4xl text-black">Admin Dashboard</div>
<div className="text-login-subtitle-light dark:text-login-subtitle-dark mt-6">
Enter your email and password to sign in
</div>
<label className="dark:text-white text-text-color-primary-light mt-6">
Email
</label>
<input
placeholder="Email"
className="w-full rounded font-thin px-5 py-3 mt-4"
autoFocus
type="email"
required
/>
<label className="dark:text-white text-text-color-primary-light mt-6">
Password
</label>
<input
placeholder="Password"
id="password"
className="w-full rounded font-thin px-5 py-3 mt-4"
autoFocus
type="password"
required
/>
<label
for="default-toggle"
class="inline-flex relative items-center cursor-pointer"
>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 mb-5"></div>
<input
type="checkbox"
value=""
id="red-toggle"
class="sr-only peer"
checked
/>
<span class="ml-3 text-sm font-medium text-text-color-primary-light dark:text-white mb-5">
Remember me
</span>
</label>
<button
className="text-white bg-red-900 h-16 rounded-xl w-full text-xl"
type="submit"
>
Sign In
</button>
</div>
</div>
</div>
<div className="absolute bottom-0 left-0 right-0 text-center text-black dark:text-white">
© Example Technologies Pvt. Ltd.
</div>
</div>
);
}
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
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 am using Tailwind + Headless UI to create a hamburger Menu bar on mobile to show the menu on click. But when I click on the menu it does not close automatically and creates a bad UX.
<Disclosure
as="nav"
className="fixed top-0 left-0 right-0 z-10 w-full bg-white shadow"
>
{({ open }) => (
<>
<div className="px-2 mx-auto max-w-7xl sm:px-4 lg:px-8">
<div className="flex justify-between h-16">
<div className="flex px-2 lg:px-0">
<div className="flex items-center flex-shrink-0">
<Link href="/">
<a className="relative block w-12 h-12">
<Image
src="/img/logo.png"
alt="NFT Volt Logo"
layout="fill"
className="w-auto h-6 lg:block"
/>
</a>
</Link>
</div>
<div className="hidden lg:ml-6 lg:flex lg:space-x-1">
{navLinks.map((link) => (
<NavLink key={link.id} href={link.href}>
{link.name}
</NavLink>
))}
</div>
</div>
<div className="flex items-center justify-center flex-1 px-2 lg:ml-6 lg:justify-end">
<div className="w-full max-w-lg lg:max-w-xs">
<label htmlFor="search" className="sr-only">
Search
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<SearchIcon
className="w-5 h-5 text-gray-400"
aria-hidden="true"
/>
</div>
<input
id="search"
name="search"
className="block w-full py-2 pl-10 pr-3 leading-5 placeholder-gray-500 bg-white border border-gray-300 rounded-md focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
placeholder="Search NFT projects..."
type="search"
/>
</div>
</div>
<Link href="/list-project" passHref>
<a
href="#"
className="items-center hidden px-4 py-2 ml-6 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm lg:inline-flex hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 whitespace-nowrap"
>
List your Project
</a>
</Link>
</div>
<div className="flex items-center lg:hidden">
{/* Mobile menu button */}
<Disclosure.Button className="inline-flex items-center justify-center p-2 text-gray-400 rounded-md hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
<span className="sr-only">
Open main menu
</span>
{open ? (
<XIcon
className="block w-6 h-6"
aria-hidden="true"
/>
) : (
<MenuIcon
className="block w-6 h-6"
aria-hidden="true"
/>
)}
</Disclosure.Button>
</div>
</div>
</div>
<Disclosure.Panel className="lg:hidden">
<div className="pt-2 pb-3 space-y-1">
{/* {navLinks.map((link) => (
<NavLinkMobile
key={link.id}
href={link.href}
onClick={() => {
console.log('click');
close();
}}
>
{link.name}
</NavLinkMobile>
))} */}
{navLinks.map((link) => (
<Disclosure.Button
as={NavLinkMobile}
key={link.id}
href={link.href}
>
{link.name}
</Disclosure.Button>
))}
<NavLinkMobile href="/list-project">
List your Project
</NavLinkMobile>
</div>
</Disclosure.Panel>
</>
)}
</Disclosure>
Tried to add manually close on click but doesn't seem to work.
The trick is to wrap the links with <Disclosure.Button> </Disclosure.Button> and it will close automatically the panel.
See: https://headlessui.dev/react/disclosure#closing-disclosures-manually
Use can use the close prop from Disclose itself.
import it this way ({ open, close }) and use it
onClick={() => {
close();
}}
Try using Next.js Router's push function to navigate the user when the Disclosure.Button is clicked.
At the top of your component, call the useRouter hook:
const router = useRouter();
With that, you can modify your JSX by adding an onClick property where you then call router.push({path}) , like this:
{
navLinks.map((link) => (
<Disclosure.Button
as="a"
key={link.id}
onClick={() => {
router.push(`${link.href}`);
}}
>
{link.name}
</Disclosure.Button>
));
}
Using the Next.js router will navigate the user to the desired href while still allowing the Disclosure render prop to toggle from open to closed.
For more infomation, check out - https://nextjs.org/docs/api-reference/next/router#routerpush