I have a laravel component for a submit button in Tailwind.
The button code is:
<div class="{{ $position }} mt-4">
<button type="submit"
class="inline-flex items-center h-10 px-5 text-indigo-100 bg-indigo-600 rounded-lg focus:shadow-outline hover:bg-indigo-800" style="{{ addShadow() }}"
#if (!empty($onClick))
onclick="{{ $onClick }}"
#endif
>
#fas('{{ $icon }}')
<span class="ml-2">{{ $label }}</span>
</button>
The things like position, icon, label, onclick are passed in OK.
My problem is that unless the mouse is over the button it deos not really appear as can be seen from the image attach. The first shows as the page opens and the second is as the mouse is over.
I simply cannot get this to work!
I normally actually upload and test in an online area, but with the new Laravel Vite changes are not made. If this is done in localhost and then uploaded the app.css etc it works.
Related
I have this Formik Form with Yup validation :
<Form>
<div className="mt-3">
<label className="font-semibold">Nom</label>
<Field className={`mt-2 rounded-md w-full py-2 px-3 ${errors.lastname ? 'border-2 border-red-500 error-form error-form' : 'border'}`}
name="lastname"
type="text"
placeholder="Votre nom"
/>
{errors.lastname &&
<div className="text-red-500 text-sm">{errors.lastname}</div>}
[...]
</div>
I disable the verification before submit (because I didn't want the visitor to be alarmed on every input even before he filled it :
validateOnChange={false}
validateOnBlur={false}
Everything works fine. But now I want to set a green border on the input (when I click on Submit button) to the Fields that are OK for Yup.
I already do it with red borders when error.
I tried className={`mt-2 rounded-md w-full py-2 px-3 ${errors.message ? 'border-2 border-red-500 error-form' : 'border'} ${!errors.lastname ? 'border-2 border-green-500' : ''}`} but this set all my fields in green border even before the submit.
Any idea ?
Yes, it will be applied before you even submit the form as you're just checking if it has error or not. Obviously in the beginning, since there are no errors, all borders will be painted green.
Apply the same code conditionally on submit button click and it will work.
Or to make things more clean, you can dynamically add a class like form_submitted on submit click and then use the following CSS
.form_submitted input {
border-color: green;
}
.form_submitted input.error {
border-color: red;
}
<button disabled={!session}
className={`button mt-2 ${!session && "from-gray-300 to-gray-500 border-gray-200 text-gray-300 cursor-not-allowed"}`}>
{!session ? 'Sign In to checkout' : 'Proceed to checkout'}
</button>
This is the code for it
Expected a gray background with a disabled button but got the following output -
This is the picture
I have this rails reactjs app that if I put this line in the form
<input type='submit'/>
It will create for me a blue button. I have just installed Tailwind and if I input this line with tailwind class, it does not have any effect on the button design.
<input type='submit'
className='bg-red-500 text-white font-bold py-2 px-4 rounded-full'/>
Is there a way that I can override this global settings like putting !important inline in the className?
Any help would be greatly appreciated.
You can add a ! character before the class name and that should do the job
Example:
<input type='submit'
className='!bg-red-500 text-white font-bold py-2 px-4 rounded-full'/>
Docs: https://v2.tailwindcss.com/docs/just-in-time-mode#built-in-important-modifier
Yes, You can config tailwind.config.js if you add this
module.exports = {
important: true,
}
this will generate all tailwind classes as !important
read more here
Is there any mouseup event in alpinejs?
#click.away is not suitable, because you actually need to click somewhere else.
And in my case one event should be triggered when button is pressed and another when mousekey is released no matter where courser is.
Update:
Right now I have this code:
<div x-data="{ buttonPresed: false }">
<button
#click=" buttonPresed = true "
class="h-10 w-40 border rounded-lg bg-white text-black font-bold">Some Button</button>
<div x-show=" buttonPresed === true " class="text-lg text-white font-bold">Button pressed</div>
</div>
Text "Button pressed" is shown after the button is pressed.
I need it to be hided (buttonPresed=false) when mouse button is released.
So text is only shown when user's finger on the mouse button.
How can I do this?
You can use any DOM events with Alpine.js's x-on:[event-name] or #[event-name] in this case x-on:mouseup="console.log($event)" or #mouseup="console.log($event)" will log the mouseup event when it's triggered.
Even though #Hugo partly answered my question I decided to write a complete answer.
<div x-data="{ buttonPresed: false }">
<button
x-on:mouseup="buttonPresed=false"
x-on:mousedown="buttonPresed = true"
{{-- don't use!!!!!: #click=" buttonPresed = true " --}}
class="h-10 w-40 border rounded-lg bg-white text-black font-bold">Some Button</button>
<div x-show=" buttonPresed === true " class="text-lg text-white font-bold">Button pressed</div>
</div>
The commented part is very important, because the functionality works how it should work only if both events triggered with "x-on".
I'm trying to make an ugly file upload button look like a nice font awesome icon.
Here is what I have so far:
<div class="col-12 col-md-4">
<button type="button" class="btn btn-round mt-0 mb-0 uploadMediaTrigger" data-toggle="modal" data-target="#uploadMedia" rel="tooltip" data-placement="top" title="Upload Media">
<i class="far fa-images"></i>
</button>
{{ form_widget(postForm.file, { 'attr': {'class': 'far fa-images'} } ) }}
</div>
Do you know how I can get the ugly button to look like the font awesome icon? Seems like merely adding the font awesome classes doesn't work.
Here is a picture:
Check this answer with Form Themes and Form Extensions. This solution is compatible with Symfony 2.8.x and 4.x.
Can I put html inside a Symfony form button with Twig?