6

Here is the link to ClockPicker for Bootstrap: http://www.jqueryrain.com/?B83aD_dg

It works perfectly; however, when I try to use it to fill in a text-input in a Bootstrap modal pop up, the clock appears behind the modal pop up. How can I get the clock picker to appear in (or in front of) the modal pop up instead?

Here is an image of what happens:

enter image description here

I've tried changing the z-index of the div to be in front; I've also tried changing the z-index of every element in clockpicker.css to be in front (for example: z-index: 1120). However, all this does is make the clock disappear.

<div class="modal fade appointment-modal"
     id="appointment-modal"
     tabindex="-1"
     role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true">

<div class="modal-dialog tutors-modal">
    <div class="modal-content tutors-modal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Appointment Scheduler</h4>
        </div>
        <div class="modal-body" style="height: 575px; left: 2.5%;">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">     
                        <div class="alert alert-danger"><span class="glyphicon glyphicon-alert"></span>
                            <form role="form" action="/portal/make-appointment/" method="post" id="appointment_form" class="form-horizontal">
                                <div class="col-lg-6">

                                    <div class="input-group clockpicker" id = "clockpicker" style="padding: 6px; padding-bottom: 20px;">
                                        <input type="text" class="form-control" id = "time" name="time" value="08:00">
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-time"></span>
                                        </span>
                                    </div>
                                    <script type="text/javascript">
                                        var input = $('#time');
                                        input.clockpicker({
                                            autoclose: true
                                        });
                                    </script>
                                    <input type="submit" name="submit" id="submit" value="Schedule Appointment" class="btn btn-info pull-right">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
        </div>
    </div>
</div>

1
  • Edited my post, it now has the code I'm using. clockpicker.js and clockpicker.css are loaded into the .html page, too. I also added a screenshot of what happens.
    – Grace
    Commented May 30, 2014 at 18:33

4 Answers 4

12

I made a JSFiddle with your code.

As I suspected the problem is that the z-index of the modal is higher than the z-index of the clock-modal.

All you have to do in order to fix this is add this in your CSS:

.clockpicker-popover {
    z-index: 999999;
}
0
1

just add this style to your clockpicker

.clockpicker-popover 
{
   z-index: 999999 !important;
}
1

I solved this problem using this only

.popover {
     z-index: 215000000 !important;
 }
-1

Just sort the style sheets to overlay the elements:

  • First JQuery
  • Then Clockpicker
  • And finally Bootstrap

Example:

<!-- jQuery -->
<script src="../librerias/jquery/jquery-3.4.1.min.js"></script>

<!-- Clockpicker -->
<link rel="stylesheet" type="text/css" href="../librerias/clockpicker/css/jquery-clockpicker.min.css">
<script type="text/javascript" src="../librerias/clockpicker/js/jquery-clockpicker.min.js"></script>

<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="../librerias/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../librerias/bootstrap/css/bootstrap.min.css">
<script src="../librerias/bootstrap/js/bootstrap.min.js"></script>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.