I want my input fields to have a colored background when focused. I want that to transition in. But it does not.
I don’t see the label text when the field is empty, and the field is not using my horizontal padding of 10:
My settings:
Cheers, Peter
Hello, @philledille. Thanks for reaching out.
I suppose you’d like to animate the background color transition? Like, when you’re focusing the input field - it’s background color changes slowly and with some effect? I’m not sure if it is possible, unfortunately.
Can you please clarify a bit more this point? I want to make sure I understood you correctly.
I will ask my dev colleagues for advice if this is expected behavior.
Yup, it is happening with those animation effects, that have the text placed inside the input field. If you have the placeholder and the initial content at the same time - you will see this superposition.
Thank you for your request! I will get back to you once I have something useful on your 3rd question.
Regards, Kate
Thank you for the clarification. Yes, correct. When you are using the plugin, it affects the input field and its surroundings because of the animation type that is used. For example, when you’re using the Effect-16, which animation is jumping up placeholder - the padding will be ignored.
When using Effect-16, with the same settings as you, I can’t see the label appearing over the text, using auto-binding. What do I observe - the label is invisible at all. I presume this is happening because of the Style/settings - if remove them, the label will be visible:
If to change to any other effect, you’ll see that this issue is reproducing only for some particular animations, then are affecting the text inside the input field. But it can be easily avoided by not using the Initial content at the same time with an auto-binding checkbox.
Please let me know if you have any questions or help is needed.
Regards, Kate
Thanks for your effort to explain with a video. I still don’t understand how I can remove the placeholder when there’s content in the field:
4): Field out of focus with no content:
Also, the label font is used for field content, which it should not:
I found a problem with using it on Search Inputs:
When in focus with content:
When out of focus, with content (which is different from normal input fields):
Best, Peter
This is really a showstopper for my client. Could we have a quick live chat?
Best, Peter
Apologies, to be able to help you set up the plugin correctly, I need to know what the actual result you want to achieve. Please tell/show an example of the result you’d like to have, using this plugin?
The point is for some animation effects you need to test and adjust the Initial Content/Placeholder to the content you/your users will input into the input field. If you’d like to avoid text overlapping (the text input with the placeholders/initial content) - you need to refuse to use placeholder or initial content .
Also, it is useful to note that some custom styles that you add to your input fields can affect the plugin . So please test carefully and choose the best way of the plugin/input field style setup.
I presume the best variant for you is to test our demo page and choose the most proper animation effect for you:
https://zeroqode-demo-08.bubbleapps.io/input-effect
Regards,
To remove the placeholder, you need to delete the content from this field:
This is a preset plugin feature. If you want to have the same font as your custom style has, you just can set alike font into the plugin’s element.
Here I can advise you to choose another plugin effect to avoid the text overlapping.
I hope it helps 
