Dropdown arrow  rotate
Application Type
Reactive

Hi , 

I am new at outsystems. I am trying to use dropdown and dropdown search in reactive web. In dropdown search arrow icon is rotating while clicking. But in simple dropdown it is not. So how can i apply same behavior in simple dropdown. 

simple dropdown. You can see , while expanding it is static. But i need to rotate upward. Same as dropdown search widget.

Any help greatly appreciated. Check my oml.



Thanks.

DropdownIconTransition.oml

Hi Rahul,

you can do this with that component:

This way, the search will not be available, and it has the behaviour that you want.

DropdownIconTransition.oml

mvp_badge
MVP

Hi Rahul,

In addition to Luis comment, I have a workaround to suggest for the mentioned use case of rotating the default Dropdown arrow using JS code.

Implementation Steps:

1) Wrap the dropdown widget within a container

2) Define the mentioned style class definition in the respective screen style sheet section

.custom__ddStyle :after{
     transform: rotate(135deg);
}

3) Define a JS node in the screen OnReady handler flow.

i.e. On parent container click, toggle the style class (custom__ddStyle) in the respective parent container

JavaScript Snippet:

document.querySelector('#' + $parameters.DropdonwCntr).addEventListener('click', function() {
    this.classList.toggle('custom__ddStyle');
});


Check this Sample Screen:  Task | Rotate Default Dropdown Arrow Icon

Refer to the attached .oml file


I hope this helps you!


Kind regards,

Benjith Sam

RWALabDDRotateArrow.oml

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