AUI Select2 got stack order problem in JIRA gadget Edited

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

Captura de pantalla 2017-12-29 a la(s) 12.35.11.png

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,

1 answer

1 accepted

5 votes

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!

Suggest an answer

Log in or Sign up to answer
How to earn badges on the Atlassian Community

How to earn badges on the Atlassian Community

Badges are a great way to show off community activity, whether you’re a newbie or a Champion.

Learn more
Community showcase
Published Monday in Jira Software

How large do you think Jira Software can grow?

Hi Atlassian Community! My name is Shana, and I’m on the Jira Software team. One of the many reasons this Community exists is to connect you to others on similar product journeys or with comparabl...

688 views 6 13
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you