Just a heads up: On March 24, 2025, starting at 4:30pm CDT / 19:30 UTC, the site will be undergoing scheduled maintenance for a few hours. During this time, the site might be unavailable for a short while. Thanks for your patience.

×
Create
cancel
Turn on suggestions
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Product Q&A
See all
Community resources
Top groups
Explore all groups
Community resources
Learn
Community resources
Events
Community resources

Inline dialog doesn't show up

Arturas Rimkus
Arturas Rimkus April 15, 2016

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?

Answer
Watch
Like Be the first to like this
1095 views

16 answers

0 votes
Arturas Rimkus
Arturas Rimkus May 10, 2016

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

Reply
0 votes
Sean Curtis
Sean Curtis
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
May 3, 2016

@Arturas Rimkus scurtis@ is my email.

Reply
0 votes
Arturas Rimkus
Arturas Rimkus May 2, 2016

@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

Reply
0 votes
Robert Massaioli (Atlassian)
Robert Massaioli (Atlassian)
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 28, 2016

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

 

Reply
0 votes
Arturas Rimkus
Arturas Rimkus April 28, 2016

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

Reply
0 votes
Sean Curtis
Sean Curtis
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 27, 2016

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

Reply
0 votes
Arturas Rimkus
Arturas Rimkus April 27, 2016

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

Reply
0 votes
Sean Curtis
Sean Curtis
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 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)

Reply
0 votes
Arturas Rimkus
Arturas Rimkus April 26, 2016

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

Reply
0 votes
Sean Curtis
Sean Curtis
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 25, 2016

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

Reply
0 votes
Arturas Rimkus
Arturas Rimkus April 21, 2016

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

Reply
0 votes
Arturas Rimkus
Arturas Rimkus April 18, 2016

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?

Reply
0 votes
Sean Curtis
Sean Curtis
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 18, 2016

Sure

#id-of-your-inline-dialog {
    max-width: 300px;
}
Reply
0 votes
Arturas Rimkus
Arturas Rimkus April 17, 2016

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.

Reply
0 votes
Sean Curtis
Sean Curtis
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 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.

Reply
0 votes
Robert Massaioli (Atlassian)
Robert Massaioli (Atlassian)
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 17, 2016

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?

Reply

Suggest an answer

Log in or Sign up to answer
Jira
Jira
TAGS
AUG Leaders

Upcoming Jira Events