Get product advice from experts

Ask a question →

Join a community group

Find a group →

Advance your career with learning paths

Take a free class →

Earn badges and rewards

Connect and share ideas at events

See the calendar →

Community
Products
Jira
Questions
Inline dialog doesn't show up

Inline dialog doesn't show up

I am trying to display an inline dialog element from the AUI library.

&lt;div class="aui-item narrow-item"&gt;
  &lt;a data-aui-trigger aria-controls="show-on-hover" href="#show-on-hover"&gt;
    &lt;span class="aui-icon aui-icon-small aui-iconfont-help float-right"&gt;Help&lt;/span&gt;
  &lt;/a&gt;
  &lt;aui-inline-dialog id="show-on-hover" responds-to="hover" alignment="right middle"&gt;
    &lt;p&gt;First paragraph&lt;/p&gt;
    &lt;p&gt;Second paragraph&lt;/p&gt;
    &lt;p&gt;Third paragraph&lt;/p&gt;
  &lt;/aui-inline-dialog&gt;
&lt;/div&gt;

I have referenced AUI libraries in the <head> section on my page

&lt;link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.9.17/css/aui.min.css" media="all"&gt;
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="//aui-cdn.atlassian.com/aui-adg/5.9.17/js/aui.min.js"&gt;&lt;/script&gt;

However, for some reason the dialog just doesn't appear.

Any ideas why?

16 answers

0 votes

Hi @Sean Curtis. Have you received my email? Thanks.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

@Arturas Rimkus scurtis@ is my email.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

@Robert Massaioli, thanks for the suggestion, we have now moved to Cloud Dev. @Sean Curtis, how can I add you to it? I believe I'll need your email address? Is there a way to PM here?

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

Hi @Sean Curtis and @Arturas Rimkus now that we have released the Cloud Development Environment (https://developer.atlassian.com/blog/2016/04/cloud-ecosystem-dev-env/) Arturas could create a cloud development environment, install his add-on there, and then create a user for Sean and give him access. Then you could both diagnose the problem against the same JIRA instance and get to the root cause quickly instead of this back and forth.

Just a quick suggestion.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

Yes. It works however running my html+css standalone. How can I send those over?

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

You got that error using the jsbin link I posted above?

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

I tried, but it's not rendering properly - console says AJS (to run Atlassian scripts) is not defined.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

@Arturas Rimkus could you reproduce your example on jsbin? Use http://jsbin.com/leboqi/edit?html,output as a starting point (I copied your original code in there)

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

Can I send you the html and css file? You could then see the exact code.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

I'd have to see a screenshot @Arturas Rimkus.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

@Sean Curtis, could you please give me any clues as to why my inline-dialog is mis-positioned? Thanks

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

Thanks @Sean Curtis, I already got that, I shouldn't have even asked How about the (1) part of my question? What determines where the dialog will display?

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

Sure

#id-of-your-inline-dialog {
    max-width: 300px;
}

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

You both are right, thanks. It shows up now. Except for a couple of issues. (1) The inline dialog is not displayed next to the element that triggered - it displays at (what seems to be) a random edge of the page. (2) Is there a way to set dialogue max width? It now displays almost screen-wide.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

Yup — the custom element version of the <aui-inline-dialog> element is only in experimental.

See http://jsbin.com/juyabet/edit?html,output for a working example.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

0 votes

Those docs say that inline dialog is "Not in core". Have you tried also including aui-experimental.(js|css) in the head of your page?

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Reply

Suggest an answer

Log in or Sign up to answer

Was this helpful?

Thanks!

TAGS

Community showcase