CODEWITHSUNDEEP
jquerytwitter-bootstraptwitter-bootstrap-3datepickeradminlte
petekaner
petekaner

Reputation: 8911

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?

Upvotes: 1

Views: 2997

Answers (1)

Rafał Mnich
Rafał Mnich

Reputation: 546

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>

Upvotes: 2

Related Questions