CODEWITHSUNDEEP
csstwitter-bootstrapjquery-ui
Nadishan
Nadishan

Reputation: 580

Jquery UI date picker is not display correctly

I try to insert jquery date time picker to a page. But it is appear like this. What are the possible solutions?

enter image description here

My code is here. 

                <div class="col-md-offset-8" style="width: 320px;height: 200px;border: 1px solid #ccc;padding: 10px; box-shadow:2px 2px 4px #f6f6f6; position: absolute;top: 100px;">


                    <form method="post" action="payment.php" onsubmit="return paymentConfirm()" >

                        <label>Package :  <?php echo $pkgs[$id]['name'] ?></label><br/>

                        <input type="hidden" name="pkgname" value="<?php echo $id ?>" />

                        <input type="text" name="date" id="date" />    

                        <label>No. of days :  <?php echo $pkgs[$id]['days'] ?></label><br/>

                        <label>No. of peoples :  <input type="number" style="width: 60px;" id="ppl" name="ppl" value="1" onclick="calc()" onblur="calc()" min="1"/> X $<?php echo $pkgs[$id]['price'] ?></label><br/>

                        <input type="hidden" id="ppl_hidden" name="ppl_hidden" value="1"/>

                        <label style="font-size: 25px;" name="price">Price :  $<span id="price"><?php echo $pkgs[$id]['price'] ?></span></label><br/>
                        <input type="submit" class="button1" value="Book now"/><input type="button" class="button1" value="Print"/>
                    </form>


                </div>

Jquery code

$(function () {
                        $("#date").datepicker();
                    });

Upvotes: 0

Views: 145

Answers (2)

himanshu
himanshu

Reputation: 1797

there are 2-3 problem i can see so far

  1. z-index of date is not set.

  2. you placed this in a absolute div col-md-offset-8 so you have to position it well

  3. please provide form css so i can help you more

Upvotes: 1

rnevius
rnevius

Reputation: 27112

In your .css, change the z-index of #date to be greater than the z-index for your drop shadow.

Upvotes: 1

Related Questions