9
Views
2
Comments
Dropdown Select Combo Box to be on Top of Popup
Application Type
Traditional Web

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:


if scroll down a bit:



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.


mvp_badge
MVP
Rank: #75

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

Rank: #56320

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