APEX 5.0 Modal Pages

[martindsouza]

In APEX 5.0 if Select2 is added on a modal page where it exceeds the page, what should happen? Right now it gets cut off:

Some options:

• Shrink the list so that it doesn't exceed the length of the modal window
• Let it go over the modal page (but don't think this is possible since it's an iFrame)

[nbuytaert1]

Option 2 won't be possible indeed. Option 1 is a possibility, but I don't think it will be easy to calculate the height of the dropdown. Why don't you set the height manually with some CSS?

.select2-drop .select2-results {
  max-height: 100px;
}

Sorry for the lazy approach...

[martindsouza]

@nbuytaert1 That makes sense, no need to apologize. Thanks for the quick turn around.

[rimblas]

In the Super LOV plugin, Dan McGhan implemented a "Climb the DOM Tree" option. This was exactly for using it in Modal Windows. The LOV would "climb" the DOM tree and attach itself to the top most page, effectively adding it on top of the Modal Window iframe. Now, with Select2, this technique may be a lot more complicated because the drop down is not just floating on top in the middle of the viewport, it has a specific position that it needs to be respected. I just thought I would plant the seed and see if it generated any clever ideas. ;-)

[nbuytaert1]

Thanks for the input Jorge. That's probably a valid workaround. One problem is that the Select2 plugin uses 15 component attributes, which is the limit. So adding extra attributes is not an option.

[martindsouza]

If it's any help for others, here's the selector I used to restrict the height on modal/dialog pages only:

body.t-Dialog-page .select2-drop .select2-results{
  max-height: 100px;
}