27
Views
6
Comments
Solved
Reactive Dropdown Search CSS
Question

I am using 3 dropdown search controls in a web block in a Reactive app. The dropdown values list is getting cut off from the surrounding elements, including the web block itself. Does anyone have a fix for this?

(see attached screenshot) 

Thanks!

dropdownsearchcss.jpg

Rank: #2857
Solution

Hi Michael ,

If you are using list  so u can use this Css

.list.list-group {

   overflow: visible !important;

 it would be work for you.


Thanks,

Diksha Magre



Rank: #68

Hi Michael,


Usually, this kind of issues can be corrected with CSS property z-index.


The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).


So on your case, I would try to put for instance z-index: 999 on the options to guarantee it comes on top or a negative z-index on the content which is getting in front.


Hope it helps.


Cheers,

João

Rank: #2553

Thank you Joao. I neglected to mention that I tried that already. I overrode the class with this:

z-index: 99999 !important;

This didn't work. I also did as you suggested and set the surrounding containers to a negative z-index. But still the same issue. 

I ended up putting back the regular dropdown for now. 

Rank: #362

Hi Michael, 

you might check the css overflow property as well. it can expand the dropdown behind or on top of other elements. https://www.w3schools.com/cssref/pr_pos_overflow.asp


Regards Hans 

Rank: #2857
Solution

Hi Michael ,

If you are using list  so u can use this Css

.list.list-group {

   overflow: visible !important;

 it would be work for you.


Thanks,

Diksha Magre



Champion
Rank: #134

Michael Furnari wrote:

I am using 3 dropdown search controls in a web block in a Reactive app. The dropdown values list is getting cut off from the surrounding elements, including the web block itself. Does anyone have a fix for this?

(see attached screenshot) 

Thanks!

 Hi Michael Furnari,

Please refer below snap shot :

 Use AdvanceFormat property of DropDownSearch Widget

"{
    ""position"": ""bottom"",
    fuseOptions: {
          threshold: 0.2,
          matchAllTokens: true,
          tokenize: true        
    }
}"

https://amit-verma331.outsystemscloud.com/DropdownSearch/TestScreen?_ts=637389657171124109

Hope this will help you :)

- AV

Thanks

Rank: #2553

Thanks Everyone. The overflow property and specifically Diksha's css worked for me. 

.list.list-group {

   overflow: visible !important;


Thank you!