Select2: Non-Functional in a Maximised Region

[tonyc555]

If the Select2 plugin is used in a Theme 42 application in a region that has the "Show Maximize Button" template option the drop-down and text selection does not appear when the region is maximized. The Select 2 item basically becomes non editable.

The problem manifests itself in Single Value and Multiple Value select lists. I haven't tried it with tagging support.

Reproducing the problem: Create a Theme 42 application that has a page with a region with the "Show Maximize Button" template setting. Add a Select2 LOV to that region. Run the application and maximize the region containing the Select2.

Problem manifests itself in the following browsers: Google Chrome 60, Internet Explorer 11, Internet Explorer Edge, Firefox 55

We are using the latest version of Apex: 5.1.2.00.09, Oracle 12.1 and the latest version of Select2: 3.0.3

[maxime-tremblay]

Hello @tonyc555

Until the fix is included in the plugin, you can add the following CSS to your application.

.js-regionIsMaximized .select2-container--open {
    visibility: visible;
}

Regards
Maxime

[tonyc555]

Hi Maxime,

I found another workaround that also fixes the problem of the drop down becoming displaced when using pinch-zoom on mobile devices, described here: https://select2.org/troubleshooting/common-problems#the-dropdown-becomes-misaligned-displaced-when-using-pinch-zoom

Add a static id to the region where the Select2 is contained and use the following as an Extra Option

dropdownParent: $("#regionStaticId")