I am using animated label with text area as input.Now, when i focus on text area, the label is not moving up.
Basically the following CSS is not triggered.
.animated-label.active .animated-label-text {
top: 5px;
left: var(--space-base);
}
Note: The same is working fine when I use textbox instead of text area as input.Thanks in advance
Hi Ragavi,
I can confirm this is not working with a textarea. When I read the documentation of animated label they are specifcally talking about input. Also the OutSystems UI example is only talking about input and not about textarea. Maybe you should try and write some own css to make this work? Working example can be found here and a other examples can be found here.
You could also try to write your own JavaScript so the active class is getting added to a textarea aswell.
Thank you Bart for your inputs.
Continued with Bart Comments, yes we can not use animation on text area , you can use following code or check here https://www.geeksforgeeks.org/how-to-create-text-changing-animation-effect-using-css/
or
<style>
<
style
>
body {
background: green;
h1 {
display: flex;
justify-content: center;
color: white;
span::before {
content: "Your Text";
animation: animate infinite 3s;
padding-left: 10px;
@keyframes animate {
0% {
Your Text
50% {
75% {
</style>
</
Regards,
komal
Thank you Komal
As Bart already mentioned that the default AnimateLabel widget is only focused for Input widget but you can do some modification within the same widget implemenation to fulfill your use-case.
For the mentioned use-case, I have cloned the AnimateLabel widget from OutSystemsUI module and modified i.e. customized the defined JavaScript code for AnimateLabel widget to support the TextArea Input widget.
See this sample screen TextAreaAnimateLabelDemo
Refer to the attached .oml file
Hope this helps you!
Kind regards,
Benjith Sam
Thanks Benjith Sam for the timely help.
I have followed your solution for dropdown as well by changing the queryselector in the JS. It is working absolutely fine.
You're welcome, Ragavi :)
Glad to hear that the solutions helped you :)
Hi @Benjith Sam, do you have an oml for animated label for dropdown? thanks!
Hello Ragavi Arumugam
Could you please tell us the OutSystems UI version you're using?In Version 2.8.0 this component was released with a complete review implementation and it should be working properly as I was able to see on a quick test:
So, no clone to maintain on your end nor custom CSS should be necessary.
Best Regards,GM
how about for dropdown?