CODEWITHSUNDEEP
javascriptphpjquerytwitter-bootstrapbootstrap-modal
user5740150
user5740150

Reputation:

JQuery timepicker plugin hidden behind modal window

I was searching for answer on the internet and on stack's other questions, but none of the solutions are working for me. I'm trying this for days. My timepicker JQuery plugin appears behind the triggered modal window. I don't have much time left before the science fair and I'm really in trouble. I would be really, really greatful if someone knows how to help me. Cheers guys and thanks in advance. Here's the code and picture:

Screenshot of time-picker

Form section

<div class='form-group'>
    <label for='start' class='col-xs-4 control-label'>Starting time</label>
        <div class='col-xs-5'>
            <?php include('test.php'); ?>
        </div>
</div>

Test.php

<html>
<head>
  <style type="text/css" media="all">@import "timePicker.css";</style>
  <style type="text/css">
  input {
    margin:0;
    padding:0;
  }
  pre {
    background:#fff;
    border:1px solid #ddd;
    padding:4px;
  }
  .ui-timePicker { 
  position: relative; 
  z-index: 10000 !important; 
  }
  </style>
  <meta charset='utf-8'>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  <script type="text/javascript" src="jquery.timePicker.js"></script>
 </head>
 <body>
            <p><input id="time1" type="text" class="time form-control" /></p>
        <script>
              $("#time1").timePicker();            
        </script>
</body>
</html>

Upvotes: 0

Views: 602

Answers (1)

Matt
Matt

Reputation: 4752

Have you tried just changing the z index of your time picker?

<style>
#time1{
    z-index:1151 !important;
    }
</style>

Upvotes: 1

Related Questions