Inline dialog doesn't show up

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

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

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

This widget could not be displayed.

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?

This widget could not be displayed.
Sean Curtis Atlassian Team Apr 17, 2016

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.

This widget could not be displayed.

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.

This widget could not be displayed.
Sean Curtis Atlassian Team Apr 18, 2016

Sure

#id-of-your-inline-dialog {
    max-width: 300px;
}
This widget could not be displayed.

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

This widget could not be displayed.

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

This widget could not be displayed.
Sean Curtis Atlassian Team Apr 25, 2016

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

This widget could not be displayed.

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

This widget could not be displayed.
Sean Curtis Atlassian Team Apr 26, 2016

@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)

This widget could not be displayed.

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

This widget could not be displayed.
Sean Curtis Atlassian Team Apr 27, 2016

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

This widget could not be displayed.

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

This widget could not be displayed.

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. smile

 

This widget could not be displayed.

@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? smile

This widget could not be displayed.
Sean Curtis Atlassian Team May 03, 2016

@Arturas Rimkus scurtis@ is my email.

This widget could not be displayed.

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

Suggest an answer

Log in or Sign up to answer
Community showcase
Published Friday in Jira

New 5k User Limit and Other Cloud Updates

Hi all! Lauren here from the Enterprise Cloud marketing team.  I have some exciting Cloud updates from #AtlassianSummit that I wanted to share. We want everyone in your organization to be ab...

122 views 0 3
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