[OutSystems UI] Animated label is not working for text area
Forge component by OutSystems R&D
Application Type
Reactive

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

TextArea.PNG

mvp_badge
MVP
Solution

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

RWALabTextAreaAnimateLabel.oml

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.

mvp_badge
MVP

You're welcome, Ragavi :)

Glad to hear that the solutions helped you :)


Kind regards,

Benjith Sam

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/ 

or

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

                content: "Your Text"; 

            

  

            50% { 

                content: "Your Text"; 

            

  

            75% { 

                content: "Your Text"; 

            

        

    </style>


Regards,

komal

Thank you Komal

mvp_badge
MVP
Solution

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

RWALabTextAreaAnimateLabel.oml

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.

mvp_badge
MVP

You're welcome, Ragavi :)

Glad to hear that the solutions helped you :)


Kind regards,

Benjith Sam

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