Reactive: DropDown Search truncating when near end of container
Question
Application Type
Reactive
Service Studio Version
11.9.0 (Build 33414)

Working on an app where we have a list of sections, and each section can have a list of fields (of various types). (First list displays section titles etc. then for each section, I have a weblock that lists 4 possible columns (First 2 columns (Field name and possibly udatable field value) always, and 3rd and 4th columns are optional based on user selection of related record, and a reference item.)  The 2nd and 3rd columns are implemented using a field instance weblock, so we have a number of levels of webblocks, each contributing to the display..

Having problems with Dropdown Search for Lookups when the lookup is the only field in the section, or the field is near the bottom of a section..  The selectable items are not displaying completely.  It is as if the list is being hidden behind the next section.  This is very frustrating, and I'm not sure how to address this.

Sample for Lookup near bottom of list - selectable items not showing, and scroll bar not showing.

Example of Lookup where field is last displayed field in section.  (There are a bunch of related fields that only show if the No option is selected.  Our Key user specifically wants a 3 option Yes/No/Unselected scenario where we can track that user definitely picked Yes or No.


This is very frustrating as Date Picker works normally and is not cut of at end of a section, so I'm not sure why the Dropdown search is behaving differently.


Sample of a working Dropdown Search: Where there is room for items in list to  be displayed..

Solution

Tim,

Many thanks for the pointer!

.choices__list--dropdown { z-index:99; }  was close, and setting z-index stops the drop down list from going behind some things, but did not sort my issue.

Whilst debugging a browser session I started looking at some of the other settings related to .choices__list--dropdown, and spotted the position setting was set to absolute.

I updated the application level CSS adding the following entry, and my dropdowns now work as expected.  They now create the space required for the dropdown between the display box and the next element on the screen.  (This closes up again after selection has been completed. 


.choices__list--dropdown { position: relative; z-index:99; }


Closed Dropdown:

Opened (Searchable) Dropdown:

Was hoping that somebody would have a suggestion on what to do here.
Have posted other questions since this, and had immediate response to those..

Champion

Hi Steave,

Could you please share your oml or just a sample oml reproducing the same issue, so that it would be helpful for us to look into the code and inspect it?

Thanks :)

I fixed a very similar issue not so long ago by inspecting the rendered html and setting the z-index of that "dropdown" box a lot higher. So a simple css tweak can fix it.

I'll see if I can find the exact fix again.

I think it was:

.choices__list--dropdown { z-index:99; }

Solution

Tim,

Many thanks for the pointer!

.choices__list--dropdown { z-index:99; }  was close, and setting z-index stops the drop down list from going behind some things, but did not sort my issue.

Whilst debugging a browser session I started looking at some of the other settings related to .choices__list--dropdown, and spotted the position setting was set to absolute.

I updated the application level CSS adding the following entry, and my dropdowns now work as expected.  They now create the space required for the dropdown between the display box and the next element on the screen.  (This closes up again after selection has been completed. 


.choices__list--dropdown { position: relative; z-index:99; }


Closed Dropdown:

Opened (Searchable) Dropdown:

Awesome.  Great that you could solve it. 

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