When I add a modal box to my project, with a datepicker, the datepicker renders behind the modal box. I've found many answers to this issue, but none of them have solved my problem. Most are suggestions around changing the z-value. However, I have not been able to get that working in this case.

I'm using bootstrap stylesheets, and my datepickers work perfectly when not in a modal box.

Here is a snippet from my datepicker.css

datepicker {
top: 0;
left: 0;
padding: 4px;
margin-top: 1px;
border-radius: 4px;
z-index: 1080 !important; }

In my View, the modal box is set up in the following way:

      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Button</button>

            <div class="modal fade" id="myModal" role="dialog" data-backdrop="false">

                <div class="modal-dialog">

                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Modal Title</h4>
                        </div>
                        <div class="modal-body" id="modalBody">Model Body
    End of model, close all div tags
    <script for datepickers>

Any help would be greatly appreciated :)

Related posts

Recent Viewed