How to rotate arrow icon 180 degrees onclick
Application Type
Reactive

Hello! I'm working on an app where i need to rotate an basic arrow icon 180 degrees when user clicks it. I have tried javascript solutions and css but none of them are working for me. 

Any ideas?

mvp_badge
MVP
Solution

Hi Roni,

If all you need is rotation (no animation involved) you can achieve that with a simple CSS class.

Create a CSS class similar to this one:

.rotate180 {
  transform : rotate(180deg);
}

Then it's a simple matter of deciding if you should apply that CSS class or not to the icon based on a variable that you toggle to between True and False when the user clicks the icon.

You can use If(IsRotated, "rotate180", "") in your Style Classes property.

Cleaner, simple and right.

Hello and thanks for your answer. Being relatively new to outsystems, i need help implementing this solution. Could you explain how and where to implement the if sentence?

mvp_badge
MVP

Hi Ronivil,

As Jorge wrote, it should go in the Style Classes property of the element.

Thanks, it works now. However, i have the arrow on a list item within an accordion, if i click the list item to open the accordion, arrow doesnt change. I tried to put the screen action where im defining the boolean value in to the onToggle event handler but then clicking the arrow doesnt do anything.

Please check this OML, it has 2 implementation, let me know if you have questions

Regards,

CR

RotateClick.oml

Hi Roni,

do you want an instant rotate or do you want to see the full movement until it reaches the end?

If you want an instant rotate you can just use 2 icons, 1 in original position and another one rotated. Use a status variable to control the position displayed:

Regards

Hello Roni,

I've done some research on this and found this piece of code: https://stackoverflow.com/questions/26173376/rotate-font-awesome-icon-on-click

It worked for me when I was trying to find a way to help you! You can try it here: https://laurafidalgo.outsystemscloud.com/Rotate_Icon/Rotate_Icon?_ts=637819826240693284

I'm leaving here an oml, if you want to look at the code. This gives you full movement and requires 2 clicks.

Hope this helps you!

Rotate_Icon.oml

Hey and thanks for your answer! I have tried a similar solution to yours and i got "$ is not defined" on button click. I got the same error when i tried to implement your solution.

Hey Roni, 

I believe you need to have jQuery reference, and add it as a required script to your screen. Do you have it?

Well that seems obvious, no i dont have this. Neither this was not mentioned in any docs i have read, correct  if im wrong of course.

I added it to the dependencies but im still getting the same error.

Sorry, I edited my comment with a bit more information. Please try adding it as a required script

mvp_badge
MVP

Note that jquery is deprecated, and you shouldn't use it for new projects. Using CSS transform is a way better alternative (see Jorge's answer below).

Thanks, i got it working now! Could you tell me how to remove the 2 click option? I would like the rotation to be instant with one click

Sure Roni,

If you add the JS node to the OnReady event of the screen, it works with one click :)

mvp_badge
MVP

Roni,

Please also try Jorge's answer. jquery is deprecated, don't use it unless you really need to.

mvp_badge
MVP
Solution

Hi Roni,

If all you need is rotation (no animation involved) you can achieve that with a simple CSS class.

Create a CSS class similar to this one:

.rotate180 {
  transform : rotate(180deg);
}

Then it's a simple matter of deciding if you should apply that CSS class or not to the icon based on a variable that you toggle to between True and False when the user clicks the icon.

You can use If(IsRotated, "rotate180", "") in your Style Classes property.

Cleaner, simple and right.

Hello and thanks for your answer. Being relatively new to outsystems, i need help implementing this solution. Could you explain how and where to implement the if sentence?

mvp_badge
MVP

Hi Ronivil,

As Jorge wrote, it should go in the Style Classes property of the element.

Thanks, it works now. However, i have the arrow on a list item within an accordion, if i click the list item to open the accordion, arrow doesnt change. I tried to put the screen action where im defining the boolean value in to the onToggle event handler but then clicking the arrow doesnt do anything.

Please check this OML, it has 2 implementation, let me know if you have questions

Regards,

CR

RotateClick.oml

please check this JSfiddle 

I've created a pure Javascript method that dosen't require JQuery, and is based on CSS

you have 2 classes one that rotates with animation and another one that does a imediate rotation without animation.

you can tweek it to your own taste.


Regards

CR

mvp_badge
MVP

Hi Carlos,

Why would one use JavaScript instead of pure CSS?


The javascript is just to overcome the click problem, because you can't apply something on click with just CSS3, so a bit of javascript is required to handle the click portion, basicly just adding a class to the element.

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