335
Views
5
Comments
Solved
[OutSystems UI Web] Dropdown not overflowing in a modal
outsystems-ui-web
Web icon
Forge asset by OutSystems

I have the same issue as in this post:


https://www.outsystems.com/forums/discussion/56857/dropdownselect-list-not-overflowing-outside-of-modal/

But its solution isn't working for me, any other suggestions? 

I'm working in OutSystems 11


Thanks

2020-03-16 07-06-25
Oscar Vela
Solution

Solved this for OS11 as of today by adding overflow visible to the modal-wrapper class


.modal-wrapper{

overflow: visible;

}


I'm guessing the difference is because of both choicesjs version and OS version, It is important that you set overflow and not just overflow-y, it doesn't work that way for some reason


Thanks everyone!

2020-11-17 19-30-43
João Atalaia

Iin my case there was an overflow setting from the theme that was not allowing me to change this (I did not have access to change the theme). 


I ended up using:

.modal-content {

   overflow: visible !important;

}


to override the theme (note as well that I used ".modal-content" instead of ".modal-wrapper")

2021-03-18 21-03-15
Benjith Sam
 
MVP

Hi Oscar,

Could you please let me know, Is this is how you want to implement? sample app - ModalDemo


Regards,

Benjith Sam

2020-03-16 07-06-25
Oscar Vela

Benjith Sam wrote:

Hi Oscar,

Could you please let me know, Is this is how you want to implement? sample app - ModalDemo


Regards,

Benjith Sam

 Well i would like the list to overflow, i only have 2 fields in the modal, i don't think making the window taller is a good choice aesthetically speaking

 

2023-03-09 07-10-59
Vipasha Sharma

Hi Oscar,

You can inspect the name of your widget in chrome and inside the CSS of outsystems define the height of the element as per your requirement (refer snapshot below),

- Enclose you widget inside the container and in style extended property use CSS below.

"overflow: hidden;"

-For further reference you can refer the attached OML. (CSS and Container style property )

Hope this will help you,

Regards,

Vipasha

TestModal.oml
2020-03-16 07-06-25
Oscar Vela
Solution

Solved this for OS11 as of today by adding overflow visible to the modal-wrapper class


.modal-wrapper{

overflow: visible;

}


I'm guessing the difference is because of both choicesjs version and OS version, It is important that you set overflow and not just overflow-y, it doesn't work that way for some reason


Thanks everyone!

2020-11-17 19-30-43
João Atalaia

Iin my case there was an overflow setting from the theme that was not allowing me to change this (I did not have access to change the theme). 


I ended up using:

.modal-content {

   overflow: visible !important;

}


to override the theme (note as well that I used ".modal-content" instead of ".modal-wrapper")

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