I am using accordion something like this
https://www.tailwindtoolbox.com/components/accordion and I have a input field inside my accordion
<div class="tab-content overflow-y-scroll border-l-2 bg-gray-100 border-indigo-500 leading-normal">
<div class="border border-black mt-3 p-3 grid grid-cols-4">
<div class="col-span-1">
<label for="about" class="block text-sm leading-5 font-medium text-gray-700">
Title
</label>
<div class="rounded-md shadow-sm">
<textarea wire:model="additional_docs.title" name="additional_docs" id="edit_additional_docs" name="" rows="3" class="form-textarea mt-1 block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5" placeholder="description"></textarea>
</div>
<p class="mt-2 text-sm text-gray-500">
Document Title
</p>
</div>
</div>
The accordion is working fine but as soon as I start typing the accordion closes and I need to open accordion again and start typing, but if I remove wire:model ,it works fine .I am new to live wire and if I use wire:ignore it doesn't help too.
Thanks for any help :)
Add wire:ignore.self on the element which will be hidden/shown.
Related
I have a form with several input fields and some of them render conditionally using AlpineJS x-if, those elements have wire:model data, but when the elements rendered conditionally the model binding seems not working. I tried to print the variable on the element but it doesn't work. Without x-if it works fine.
<div class="form-check" >
<input class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-[#60D619] checked:border-[#60D619] focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="radio" id="company" wire:model="isCompany" #click="open = true" value="true">
<label class="form-check-label inline-block px-1 text-sm text-gray-600" for="company">
Yes, I'm a company.
</label>
</div>
<div class="form-check">
<input class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-[#60D619] checked:border-[#60D619] focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="radio" id="person" wire:model="isCompany" #click="open = false" value="false">
<label class="form-check-label inline-block px-1 text-sm text-gray-600" for="person">
No. I'm not a company.
</label>
</div>
<div class="py-1" x-show="open" x-transition>
<span class="px-1 text-sm text-gray-600">Company Name</span>
<input wire:model.lazy="companyName" placeholder="" type="text"
class="text-md block px-3 py-2 rounded-lg w-full
bg-white border-2 border-gray-300 placeholder-gray-600 shadow-md focus:placeholder-gray-500 focus:bg-white focus:border-gray-600 focus:outline-none">
</div>
<div class="py-1" x-show="!open" x-transition>
<span class="px-1 text-sm text-gray-600">User Name</span>
<input wire:model="name" placeholder="" type="text"
class="text-md block px-3 py-2 rounded-lg w-full
bg-white border-2 border-gray-300 placeholder-gray-600 shadow-md focus:placeholder-gray-500 focus:bg-white focus:border-gray-600 focus:outline-none">
</div>
<div class="py-1" x-show="!open" x-transition>
<span class="px-1 text-sm text-gray-600">First Name</span>
<input wire:model="fullName" placeholder="" type="text"
class="text-md block px-3 py-2 rounded-lg w-full
bg-white border-2 border-gray-300 placeholder-gray-600 shadow-md focus:placeholder-gray-500 focus:bg-white focus:border-gray-600 focus:outline-none">
</div>
When x-show uses the issue goes away but the unnecessary input fields are not cleared. I don't want those data to be saved on the database. Is this because x-show only toggles the visibility of the elements and x-if completely removes the element from the DOM? Or is there a way to reset the values of the input fields when visibility is toggled using x-show?
x-if indeed removes the element, while x-show only hides it.
wire:model only works if it's loaded in with Livewire. Else Livewire doesn't "know" those fields exist, and thus can't add an event listener to detect change/input/etc. Therefore, you want to do what #Bennett already mentioned, and only hide the inputs, and clear the fields.
You can use $wire to directly clear the input. Otherwise, you will have to dispatch a change or input event on the input field (change for lazy, input for non-lazy).
I have 4 livewire components, rendered in dashboard as:
#livewire('profits.stats')
#livewire('costs.stats')
#livewire('leads.stats')
#livewire('sales.stats')
However, when page loads they run one after another instead of asyncronously. I put a sleep(3) to test, and each starts after the previous ones 3 second delay. How to get them to all start same time?
toggleShowData below has the sleep method, and sets showData=true. I saw this in a tutorial for now to have a loading for individual components
I don't think its relevant, but here is my template:
<div wire:init="toggleShowData">
<div wire:loading.delay class="align-items-center">
<div class="flex items-center justify-center ">
<div class="w-40 h-40 border-t-4 border-b-4 border-brand-500 rounded-full animate-spin"></div>
</div>
</div>
<div class="flex-auto p-4 bg-brand-300 rounded" wire:loading.remove>
<div class="flex flex-wrap">
<div class="relative w-full pr-4 max-w-full flex-grow flex-1">
<h5 class="text-gray-100 uppercase font-bold text-xs"> Costs</h5>
<span class="font-semibold text-xl text-gray-300">$34,100</span>
</div>
<div class="relative w-auto pl-4 flex-initial">
<div
class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow-lg rounded-full bg-red-500">
<i class="fas fa-chart-bar"></i>
</div>
</div>
</div>
<p class="text-sm text-gray-100 mt-4">
<span class="text-emerald-500 mr-2"><i class="fas fa-arrow-up"></i> 2,99% </span>
<span class="whitespace-nowrap"> Since last month </span></p>
</div>
</div>
The first render of the livewire page happens inside the PHP process in the backend.
Blade sees that you are requesting a livewire component and replaces this with the result of your parse() method from your component.
This indeed happens in sync, once the page is rendered the components can render itself async
i am using TailWind with blade template in laravel, how can i make those card like in the bootstrap, i mean every three items in the one column :
#section('content')
<div class="flex justify-center">
<div class="w-8/12 bg-white p-6 rounded-lg mt-10 ">
#forelse($products as $product)
<!-- Box -->
<div class="md:flex md:justify-center md:space-x-8 md:px-14">
<!-- box-1 -->
<div class="mt-16 py-4 px-4 bg-whit w-72 bg-white rounded-xl shadow-lg hover:shadow-xl transform hover:scale-110 transition duration-500 mx-auto md:mx-0">
<div class="w-sm">
<img class="w-64" src="{{asset('storage/images/products/'.$product->image)}}" alt="" />
<div class="mt-4 text-green-600 text-center">
<h1 class="text-xl font-bold">{{$product->name}}</h1>
<div class="mt-4 text-gray-600">{{$product->info}}</div>
<div class="mt-4 px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-300 text-green-800">{{$product->category->name}}</div>
<button class="mt-8 mb-4 py-2 px-14 rounded-full bg-green-600 text-white tracking-widest hover:bg-green-500 transition duration-200">MORE</button>
</div>
</div>
</div>
#empty
<h1 class="text-center">There is no Products</h1>
#endforelse
<div> {{$products->links()}}</div>
</div>
</div>
#endsection
Recreate the Bootstrap grid system in Tailwind CSS
<div class="grid grid-cols-12">Your column goes here</div>
You can follow this link for further details. https://shortbuzz.in/blog/shortbuzz.in/how-to-create-tailwind-css-grid-system-like-the-bootstrap-grid-system
Here's Peppermintology's comment in the form of an answer:
It sounds like you're looking for a 3 column grid. To do that in Tailwind CSS, use the grid classes like this:
<div class="grid grid-cols-3">
<!--- Generated cards go here --->
</div>
<div class="container mx-auto">
<div class="grid grid-cols-12 gap-1">
<div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div>
<div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div>
<div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div>
</div>
</div>
<jet-button class="bg-green-600 m-auto"
#click="creatingProductCategory = true"
>Create New</jet-button>
<jet-dialog-modal :show="creatingProductCategory" #close="creatingProductCategory = false">
<template #title>Create New Product</template>
<template #content>
<form #submit.prevent="submit">
<div>
<jet-label for="email" value="Product Category"/>
<select name="" id=""
class="block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
>
<option value="1">Macrame</option>
<option value="2">Coords</option>
<option value="3">Plant</option>
<option value="4">Accessories</option>
</select>
</div>
<div class="mt-4">
<jet-label for="email" value="Product Name"/>
<jet-input id="email" type="email" class="mt-1 block w-full" v-model="form.email"
placeholder="Enter Product Name"
required autofocus/>
</div>
<div class="mt-4">
<jet-label for="password" value="Price"/>
<jet-input id="password" type="password" class="mt-1 block w-full"
placeholder="Enter Price"
v-model="form.password" required autocomplete="current-password"/>
</div>
<div class="flex items-center justify-end mt-4">
<jet-button class="ml-4" :class="{ 'opacity-25': form.processing }"
:disabled="form.processing">
Create
</jet-button>
</div>
</form>
</template>
</jet-dialog-modal>
This is the button component i have used that comes within jetstream templates.
But when i click the button the value of the variable 'creatingProductCategory' doesnt change.
Iam missing something important here !
Also if you have links to some good documentation it would be of great help :)
As Rwd mentiond in comment you need to add .native to #click:
<jet-button type="button" #click.native="someFunction" class="mr-4">
press button
</jet-button>
I got a simple way around it.
<button class="bg-green-600 m-auto inline-flex items-center px-4 py-2 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray transition ease-in-out duration-150"
#click="creatingProductCategory = true"
>Create New</button>
I used generic html5 buttons and gave it the class that was being used in jetstream buttons . It loooks exactly the same and the click handler works now
I made this style for side bar navigation
I made a box and used transform to hide it on the left side, to get the curved border effect.
On hover, active ect
Border button -> bg-green-300
text-green-300 for icon and text
font-semibold for text only
<a href="/dashboard">
<div class="flex flex-row space-x-8 w-72 text-lg pb-3 text-gray-200">
<div class="h-8 w-8 rounded transform -translate-x-7 hover:bg-green-300"></div>
<div class="flex flex-row items-center space-x-8 transform -translate-x-10 -translate-y-1">
<i class="bi bi-columns-gap hover:text-green-300 transform translate-x-1"></i>
<h2 class="hover:font-semibold hover:text-green-300 transform translate-y-1 text-base">Dashboard</h2>
</div>
</div>
</a>
Is there something I can add to the main div to activate the hover effect in each child element at same time?
Right now it works only when I hover over each individual element.
Any help is much appreciated :)
Use group-hover state
Add group class to your parent element (anchor-tag in your case)
Replace hover: with group-hover:
Worth to mention not every property supports group-hover, so there can be situation, where you may need to extend core plugins. More info about group-hover here
DEMO https://play.tailwindcss.com/dzacJTR76X
Use group in parent and group:hover in child
Code Structure:
<div class="group">
<div class="group-hover:... "/>
<div class="group-hover:... "/>
</div>
Example:
<div class="group flex ">
<div class="rounded-full bg-black w-10 h-10 group-hover:bg-cyan-400 "></div>
<i class="text-4xl ml-4 group-hover:bg-cyan-400 cursor-pointer ">Brighten me</i>
</div>
Output:
OnHover: