[OutSystems UI] Animated label is not working for text area
Reactive icon
Forge component by Platform Maintenance
Application Type

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.

Hi Ragavi,

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/ 



        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% { 

                content: "Your Text"; 



            50% { 

                content: "Your Text"; 



            75% { 

                content: "Your Text"; 






Thank you Komal


Hi Ragavi, 

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 :)

Kind regards,

Benjith Sam

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,

how about for dropdown?

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.