Dialog2, select2 - options hidden behind dialog frame

[Alex Lewis]

Hi,

I'm developing an Atlassian Connect plugin. I have it working where a separate page is created to view and interact with the plugin behaviour; however, I thought the user experience would be better using a dialog instead. Seeing that dialog is deprecated, I opted to follow the instructions for dialog2. I'm having a couple of problems:

1. Dialog sizing: The "small" dialog size in the atlassian-connect.json seems to be about the right width but has quite a large height, especially for the amount of content I want to display. Therefore, I've adopted to use width and height parameters instead. Is that the right thing to do? 
2. The "dialog content", given a class type of "aui-dialog2-content", appears to give it the right colour (white) but it doesn't seem to fill the iframe in which it is contained. Is there a way to make it fill?
3. select2 - I've used a select2 as field in which to enter values; however, when the drop-down appears to present possible values, it goes behind the dialog footer. You can scroll the content area to see the other values in the drop-down but this is a bit of a weird user experience. Is there any way to make the drop-down appear on top of everything else?
   

I've been trying to use the dialog that appears for the Labels option (JIRA Issue -> More -> Labels) as a template from a UI standpoint, and that's what I'd like to achieve.

Any help would be greatly appreciated.

Cheers,

Alex

Just in case it helps, my modules section is below:

"modules": {

    "webItems":[

        {

            "location": "operations-operations",

            "url": "/activity?issueKey={issue.key}",

            "name": {

                "value": "Ripple"

            },

            "conditions": [{

                "condition": "user_is_logged_in"

            }],

            "context": "page",

            "key": "ripple-web-item",

            "target": {

                "type": "dialog",

                "options": {

                    "chrome": true,

                    "width": "420px",

                    "height": "100px",

                    "header": {

                        "value": "Ripple"

                    }

                }

            }

        }

    ]

}

[kaimin...@servicerocket.com]

Hi Alex,

We also faced similar issue. We manage to temporarily fix the issue by setting the z-index of select2.

.aui-select2-drop {
  z-index: 3500;
}

[Daniel Woste]

Hi,

We also got some customer bug reports about the usage of dialog and safari browsers.

Most elements are not shown and are behind the dialog window.

(Chrome and Firefox seem to work fine.)

@Kaiming. Thanks for the hint with z-index. May solve your problems with safari.

Daniel

--
You received this message because you are subscribed to the Google Groups "Atlassian Connect Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to atlassian-connec...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel Woste

CEO

useblocks GmbH
Schopenhauerstr. 71
80807 Munich

Germany

website: www.useblocks.com
phone munich: +49 89 / 66 66 17 48

phone ravensburg: + 49 751 / 97 78 68 10

e-mail: daniel...@useblocks.com

useblocks GmbH
Geschäftsführung: Marco Banse, Daniel Woste
Sitz der Gesellschaft: München

Registergericht: München, HRB 193131

USt-IdNr. DE 278106025

[Alex Lewis]

Thank you both.

The z-index tip didn't work for me, which could vey well still be my misuse but I'm wondering whether it is due to the AC framework loading my plugin content in an iframe. AFAIK, iframe content can not overlap content within the parent page, or is that wrong?

Cheers

[Kai Ming Chow]

Yes Alex. The iframe is actually another layer of DOM, that's the reason the Select2 won't fall behind iframe. 

Chow Kai Ming Agile Developer, Tools Kuala Lumpur, Malaysia | +603 2091 9000

--

You received this message because you are subscribed to a topic in the Google Groups "Atlassian Connect Dev" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/atlassian-connect-dev/RG--R4rplG8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to atlassian-connec...@googlegroups.com.