Search code examples
jquerytwitter-bootstraptwitter-bootstrap-3datepickeradminlte

DatePicker not showing properly on a modal window in Bootstrap 3 (Safari/Chrome)

I’m using AdminLTE/Bootstrap for a backend dashboard and I’m having a problem when showing modal windows with the DatePickers on it.

I have the following JS code to load content from other pages on it (I just add the class load-external to links):

$('.load-external').click(function(ev) {
    var href = $(this).attr('href');
    $('#externalModal').find('.modal-body').load(href);
    $('#externalModal').find('.modal-title').text($(this).attr('data-confirm-title'));
    $('#externalModal').modal({
        show: true
    });
    return false;
});

The problem is when in the div I load a form with a DatePicker such as:

<input id="agreement_payment_estimatedPayingDate"
    name="agreement_payment[estimatedPayingDate]" 
    class="form-control" 
    required="required" 
    type="date" 
    value="2016-06-22"
    data-date-format="yyyy-mm-dd"
    data-provide="datepicker" />

The DatePicker is displayed below the modal windowdate picker

In firefox it works properly but not in Chrome neither Safari.

Any idea why this could be happening?

Solution

  • Like described here: https://stackoverflow.com/a/15183778/1041895

    Just use css, and set z-index bigger than 1150, which is modal z-index.

    <style>
    .datepicker{z-index:1151 !important;}
</style>