21
Views
4
Comments
Solved
DropdownSearch Widget Flicks When Changing Height of Each Dropdown Option?

Normally, in Dropdownsearch, the options menu stops scrolling downward when we reach the end of the option menu.

I was asked to increase the height of each option in the dropdown menu, so I did it by adding the following CSS:


.vscomp-option {    height: 55px !important; } 

.vscomp-options-container {    min-height: 110px !important; } 


This meets my requirement, but it causes an issue where the options menu no longer stops scrolling when we reach the end. Instead, it keeps bouncing up slightly, creating an unpleasant "flick" effect.

How can I change the height of options in the dropdown menu without causing this bouncing "flick" effect?



Change DropdownOptions height.png
2024-07-12 05-57-50
Gourav Shrivastava
Champion
Solution

Hello @Nam Tran Dinh 

Please use "SetVirtualSelectConfigs" action that is available in "OutSystemsUI" for increasing the height of elements. you can call it on "Onready" event of screen

You cannot do this directly from the CSS because it generate the elements in run time and refreshes it when you scroll.



Thanks 

Regards Gourav Shrivastava

2024-09-24 03-11-24
Nam Tran Dinh

The exact solution I need,
Thank you

2020-07-21 19-28-50
Rajat Agrawal
Champion

Hi @Nam Tran Dinh,

Inspect the window and check on that or share some screenshot of inspected window or if possible share OML also.


Regards,

Rajat

2024-09-24 03-11-24
Nam Tran Dinh

Here is OAP file. The first dropdownsearch currently flicking when you scroll to the end of dropdown. Then delete CSS of the screen and you can see the flicking dissapear.

Test.oap
2024-07-12 05-57-50
Gourav Shrivastava
Champion
Solution

Hello @Nam Tran Dinh 

Please use "SetVirtualSelectConfigs" action that is available in "OutSystemsUI" for increasing the height of elements. you can call it on "Onready" event of screen

You cannot do this directly from the CSS because it generate the elements in run time and refreshes it when you scroll.



Thanks 

Regards Gourav Shrivastava

2024-09-24 03-11-24
Nam Tran Dinh

The exact solution I need,
Thank you

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