30
Views
12
Comments
ComboBox in Modal doens't fit

Hi,

I have the following problem:

I have a Modal that has a ComboBox. When I click the ComboBox, the modal doesn't resize. This results in that the user needs to scroll in the Modal, so that he can see all the options in the ComboBoxto.

 I want that the modal resizes, for better UX. Anyone has a clue on how to do this?

Kind regards.

Rank: #34389

Does anyone has an idea? 

Rank: #4088

Dear Bash,

This is possible to achieve by overriding the CSS of the Modal component. generally the height of the modal and the inside area is fixed. You can find out the exact CSS class which does this by inspecting the page with the modal opened in a web browser. However you need to set a CSS max-height value for that modal. 

Feel free to override any class of default outsystems components in your screen with your own customized CSS.

Cheers !

Shounak

Rank: #34389

Hi Shounak,

It seems that when i set CSS max-height, the modal is already bigger when I open it. But I want that the Modal resizes when I click on the Combobox. And that is resizes back (smaller) when something is selected from the ComboBox. Do you have any clue on how to fix this? 

Rank: #183

Hi Bash, you can use Javascript to achieve that.

Add an event listener that read the height of the combobox list and add the size to the modal when is opened and removed when close.

Cheers,

Carlos Lessa

Rank: #4088

Dear Bash,

Can you please give me the OML for the application? Let me get my hands dirty with the CSS. I'll try to provide you the solution.

Regards,

Shounak

Rank: #34389

Hi Carlos, can you explain this solution in more detail? Would be very nice. 


Kind regards,

Bash

Rank: #34389
Rank: #183

Are you using reactive or traditional web?

Rank: #34389
mvp_badge
MVP
Rank: #72

Hi Bash,

I'm not sure whether this is what you are looking for?!

See this sample app | Task_Modal

Steps to follow:

Assuming that you are referring to Content\Modal and Controls\DropdownSelect widget in the mentioned case.

  • Add a custom class i.e. custom-modal to the Modal widget in the ExtendedClass property
  • Add a custom class i.e. customDD to the DropdownSelect widget in the ExtendedClass property
  • Define the below-mentioned CSS definition in the respective Screen Style Sheet section


CSS Snippet:

.customDD .choices__list.choices__list--dropdown {
    position: relative;
}

.custom-modal.modal-wrapper {
   // max-height: 130px !important; // to restrict the height of modal
}


Hope this helps you!


Kind regards,

Benjith Sam

Rank: #34389

Hi Benjith,

This is exactly what I want as result! However, I'm using the "Controls/TimePicker" instead of the "DropDownSelect". Is there a way to use it with this widget? Since I can't see an "ExtendedClass" option in the widget.

Kind regards,


Bash Nie

Rank: #34389

Anyone knows how? I still can't seem to get this working somehow..