So, I am having an hard time finding a way, in CSS or JS, to make a dropdown select combo box to be on top of everything on the screen while the list is open.
Popup when Opened:
Simple Combo Box - Desired Effect :
Current Dropdown Select with search function:
in Service Studio - Left combo has a Dropdown Select widget to make it searchable.
Even tho I already tried to insert {overflow-y:visible} and {z-index:9999} in almost every class related to this widgets, I cannot seem to fin a way to make this happen.
It looks so simple, if a normal Combo box can be rendered on top of all the elements the searchable Combo should be as well. Hope I can find some solution here.
Thanks in advance.
Hi GamaOS,
For the mentioned use-case, if the modal max-height is restricted as shown in the shared screen clip. I would suggest you try the below-mentioned steps.
Implementation Steps:
1) Define a custom ExtendedClass class called "custom-modal" to the modal widget as shown below
2) Define the custom "custom-modal" class definition, chaining the predefined .modal-wrapper class as shown below in the respective screen style sheet section
.custom-modal.modal-wrapper { max-height: 130px !important; // restricting the modal height }
3) Define a custom ExtendedClass called "customDD" to the DropdownSearch widget as shown below
4) Define the custom "customDD" class definition, chaining the predefined .choices__list.choices__list--dropdown as shown below
.customDD .choices__list.choices__list--dropdown { position: relative; }
See this sample app | Modal
Hope this helps you!
Kind regards,
Benjith Sam
Hi Benjith Sam
I appreciate your help but I really need this Fix on a Popup, not on a Modal - which has no issues with this dropdown. I already did a Searchable Combo Box List with Dropdown Select inside a Modal and it was functional as intended.
I have many Popups and before I go change everything for Modals I would like a solution to make this Dropdown Select to work properly inside a Popup window.
Cheer,
Gama
I'm having the same issue as you. Did you find the solution for your problem?
Thank you,
João Lopes