Datepicker doesn't work in Dialog2

[Jonathan Kernan]

Hi there,

When I put a date-picker field inside a dialog2 and click on the field, the date-picker widget is rendered behind the dialog like this:

image2015-1-22 21:26:21.png

Does anyone know how I can fix this?

I'm just using the sample code for a dialog2 https://docs.atlassian.com/aui/5.7.20/docs/dialog2.html

<button id="dialog-show-button" class="aui-button">Show dialog</button><section role="dialog" id="demo-dialog" class="aui-layer aui-dialog2 aui-dialog2-medium" aria-hidden="true">
    <!-- Dialog header -->
    <header class="aui-dialog2-header">
        <!-- The dialog's title -->
        <h1 class="aui-dialog2-header-main">Test</h1>
        <!-- Actions to render to the left of the title -->
    
        <!-- Actions to render on the right of the header -->
        <div class="aui-dialog2-header-secondary">
            <input id="demo-search" type="text" name="search">
        </div>
        <!-- Close icon -->
        <a class="aui-dialog2-header-close">
            <span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span>
        </a>
    </header>
    <!-- Main dialog content -->
    <div class="aui-dialog2-content">
        <form action="#" method="post" id="d" class="aui">
          <fieldset>
           <div class="field-group">
            <label for="d-fname">Test<span class="aui-icon icon-required"> required</span></label>
            <input class="text" type="text" id="d-fname" name="d-fname" title="first name">
            <div class="description">Test</div>
           </div>
           <div class="field-group">
            <label for="d-fname">Test<span class="aui-icon icon-required"> required</span></label>
            <input class="text" type="text" id="d-fname" name="d-fname" title="first name">
            <div class="description">Test</div>
           </div>
           <div class="field-group">
            <label for="d-fname">Test</label>
            <input class="text" type="text" id="d-fname" name="d-fname" title="first name">
            <div class="description">Default width input of a required field</div>
           </div>
        <div class="field-group">
            <label for="d-fname">Test</label>
            <input id="demo-date-picker" name="d-fname" type="date"/>
            <div class="description">Default width input of a required field</div>
           </div>
           <div class="buttons-container">
             <div class="buttons">
                 <input class="aui-button" id="submit-form" type="submit"/>
             </div>
           </div>
    </fieldset>
</form>
    </div>
    <!-- Dialog footer -->
    <footer class="aui-dialog2-footer">
        <!-- Actions to render on the right of the footer -->
        <div class="aui-dialog2-footer-actions">
            <button id="dialog-close-button" class="aui-button aui-button-link">Close</button>
        </div>
        <!-- Hint text is rendered on the left of the footer -->
        <div class="aui-dialog2-footer-hint">Test</div>
    </footer>
</section>

AJS.$("#demo-date-picker").datePicker({
    overrideBrowserDefault: true
});
// Shows the dialog when the "Show dialog" button is clicked
AJS.$("#dialog-show-button").click(function() {
    AJS.dialog2("#demo-dialog").show();
});
// Hides the dialog
AJS.$("#dialog-close-button").click(function(e) {
    e.preventDefault();
    AJS.dialog2("#demo-dialog").hide();
});
// Show event - this is triggered when the dialog is shown
AJS.dialog2("#demo-dialog").on("show", function() {
    console.log("demo-dialog was shown");
});
// Hide event - this is triggered when the dialog is hidden
AJS.dialog2("#demo-dialog").on("hide", function() {
    console.log("demo-dialog was hidden");
});
// Global show event - this is triggered when any dialog is show
AJS.dialog2.on("show", function() {
    console.log("a dialog was shown");
});
// Global hide event - this is triggered when any dialog is hidden
AJS.dialog2.on("hide", function() {
    console.log("a dialog was hidden");
});

[Sean Curtis · Accepted solution]

@Jonathan Kernan we'll be releasing a new datepicker component as the current one is very antiquated. As a temporary fix, you can add this style to make the datepicker sit higher than the dialog.

.aui-datepicker-dialog {
  z-index: 4000;
}

[Jonathan Kernan]

@Sean Curtis Thanks!! That did the trick.

[Elise Mongeau]

Where did you add this code?

[Sean Curtis]

@Elise Mongeau you'd need to add it in whatever plugin you're adding. Alternatively a JIRA admin should be able to add some HTML to the announcement banner for this style.

[Elise Mongeau]

Could you tel me more precisely where? Should I put it somewhere in this code for example: AJS.$(document).ready(function() { AJS.$('#demo-range-always').datePicker({'overrideBrowserDefault': true}); });

[Sean Curtis]

It's a CSS change, no JS change needed.

[Newbie]

Hey Jonathan, where did you define your HTML-Code, inside a SOY-Template or is there other alternative?

[Paul Pasler]

Have a look at this answer here and see if this works for you:

https://answers.atlassian.com/questions/277958