Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery datapicker appearing behind twitter bootstrap modal

I am using Bootstrap v2.3.2 and jQuery Datepicker v1.10.0,

On a modal I am trying to make use of the datepicker and it is appearing behind the modal on Firefox and IE, on Chrome it seems to be working fine.

This is what it looks like on IE and Firefox

enter image description here

My Modal HTML

<div id="editGoals" class="modal hide fade" data-keyboard="false" data-backdrop="static">
    <div class="modal-header">
        <a type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>

        <h3 style="font-size: 18px;" id="myModalLabel"><img src="assets/img/logo_icon.png">Goal Tracker</h3>
    </div>
    <div class="modal-body">
        <div id="message2"></div>
        <form action="dashboard-goals-ajax.php" method="post" name="goaldataform" id="goaldataform"
              class="form-horizontal goaldataform">
            <div class="control-group">
                <label class="control-label goal_label_text"><?php _e('Goal Target'); ?>
                </label>

                <div class="controls">
                    <div class="input-prepend input-append">
                    <span class="add-on">$</span><input type="text" class="input-medium" name="goal_target" id="goal_target" value="">
                        </div>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label goal_label_text"><?php _e('How much have you saved towards your goal?'); ?>
                </label>

                <div class="controls">
                    <div class="input-prepend input-append">
                    <span class="add-on">$</span><input type="text" class="input-medium" name="goal_progress" id="goal_progress" value="">
                    </div>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label goal_label_text"><?php _e('Goal deadline'); ?>
                </label>

                <div class="controls">
                    <div class="input-prepend input-append">
                        <span class="add-on"></span><input class="input-medium" type="text" id="goalDeadline" name="goalDeadline">
                    </div>
                </div>
            </div>
            <input type="hidden" name="goal_type" id="goal_type" value=""/>
            <input type="hidden" name="goal_target_submitted">
        </form>
    </div>
    <div class="modal-footer">
        <button data-complete-text="Close" class="dt-btn btn-yellow dt-btn-1 pull-right"
                id="goaldatasubmit" name="goaldatasubmit"><?php _e('Submit'); ?></button>


        <div class="gap-10"></div>

    </div>
</div>

JS For datepicker

<script>
    $(function () {
        $("#goalDeadline").datepicker({
            changeMonth: true,
            changeYear: true,
            minDate: +1
        });
    });
</script>

I have gone through almost every solution I could find on net and stackoverflow but nothing seems to work. I will really appreciate any help here.

like image 260
Shairyar Avatar asked Jul 08 '14 07:07

Shairyar


3 Answers

This answer covers the issue.

This is a z-index issue. Normally applying a higher z-index via CSS would work, however jQuery resets the CSS each time the Datepicker UI is drawn.

The solution re-applies the CSS each time it's drawn by using the beforeShow property.

like image 77
Matt Avatar answered Oct 17 '22 08:10

Matt


I faced the same issue, fixed it with;

.datepicker{z-index:9999 !important}

Ref: github

like image 25
Baqer Naqvi Avatar answered Oct 17 '22 07:10

Baqer Naqvi


As @Matt answered, apply z-index higher than modal’s z-index, suppose modal has the below z-index:

modal.fade {
    z-index: 10000000 !important;
}

Then apply z-index more than modal for datepicker class:

.datepicker {z-index: 20000000 !important}
like image 38
Vidya Avatar answered Oct 17 '22 08:10

Vidya