AUI Select2 got stack order problem in JIRA gadget

[Chien-Hao Chen]

Hi, I added an AUI Select2 element in my JIRA gadget, but the list couldn't show full options correctly:

I tried to add z-index as following but it didn't work:

<form id="java_post_form" class="aui">
    <select id="java_post_select" style="z-index: 999 !important;" multiple=""></select>
</form>

 Here is my javascript where adding those options:

var java_post_select = document.getElementById('java_post_select');


[].forEach.call(args.restSearch.issues, function(param) {
    var option = document.createElement("option");
    option.value = param.key;
    option.text = param.key;
    java_post_select.add(option);
});

Sincerely,

[Daz · Accepted solution]

Hi there Hao!

Unfortunately, this issue is going to be a little tricky to fix.

The reason the Select2 component's dropdown is getting clipped is because it's rendered inside the gadget's `<iframe>` element. An iframe is a hard boundary for all rendered content, so the layer disappears inside the (un-)scrollable area of the gadget itself.

There are ways to make this work, but AUI itself can't help a whole lot here in the short term. The fundamental problem is that of the iframe boxing. So long as the layer is rendered inside the iframe, it will be clipped.

There are three solutions I'm aware of. I will list them in increasing order of complexity.

1. Some of Jira's autocomplete controls have provisions for spawning a layer on behalf of the iframe. If you create an AJS.SingleSelect component, for example, that component's layer will appear in the parent page. The complexity in this approach is that, like many of Jira's UI controls, it is not documented (although it's used in most of Jira's own autocomplete fields!). Documenting how AJS.SingleSelect works is a separate problem. It's also not a very usable control, as some members of the community have noted before.

2. Instead of using an iframe-based gadget, you can create a "dashboard-item" gadget. These gadgets do not use iframes, instead rendering inside the parent page. This avoids the iframe boxing problem. Happily, writing a dashboard-item is documented and supported, so this may be a better way to go; the unfortunate thing is it requires a bit of re-work of your gadget's code.

3. Wait for an update of AUI and Jira with a layer manager that takes care of this iframe layering complexity for you. This is unlikely to happen in the short term, and may never happen.

Based on the fact that it's supported by Jira, I would suggest going the route of option (2).

Hope that helps!