DatePicker not showing properly on a modal window in Bootstrap 3 (Safari/Chrome)
petekaner
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 window
In firefox it works properly but not in Chrome neither Safari.
Any idea why this could be happening?
Rafał Mnich
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>
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Drop table that has the name in lower case from the command line
- Next: How to dump/list all kernel symbols with addresses from Linux kernel module?
Related
Related Related
- 1
Bootstrap modal - popup window not showing
- 2
bootstrap 3 datepicker not showing calendar
- 3
Leaflet map not showing properly in bootstrap 3.0 modal
- 4
Leaflet map not showing properly in bootstrap 3.0 modal
- 5
bootstrap 3 modal in meteor not showing
- 6
Bootstrap tooltip showing behind modal window
- 7
bootstrap 3 modal window not working
- 8
jQuery Datepicker in Twitter Bootstrap 3 Modal
- 9
Use jQuery DatePicker in Bootstrap 3 modal
- 10
jQuery Datepicker in Twitter Bootstrap 3 Modal
- 11
Use jQuery DatePicker in Bootstrap 3 modal
- 12
bootstrap 3 modal window close button will not close modal window
- 13
Bootstrap 3 contact modal is not showing up
- 14
Bootstrap 3 contact modal is not showing up
- 15
google+ follow button not showing properly in bootstrap modal in firefox
- 16
Launch modal window on link click? Bootstrap 3
- 17
Twitter Bootstrap 3 Modal Window OnScroll Event
- 18
Detecting if bootstrap modal window is show don't work properly
- 19
Animating showing/hiding Ui Bootstrap alert in Modal window AngularJS
- 20
Animating showing/hiding Ui Bootstrap alert in Modal window AngularJS
- 21
Bootstrap datepicker not woking in modal
- 22
Bootstrap datepicker in modal not working
- 23
Bootstrap datepicker not woking in modal
- 24
JQuery Datepicker in Bootstrap modal
- 25
Modal window not showing up
- 26
bootstrap datepicker is not showing
- 27
Bootstrap modal not hiding properly
- 28
Bootstrap modal not hiding properly
- 29
Bootstrap Modal not showing up
Comments