Change position of Datepicker inside Modelpopup textbox

8
votes

I am working on a ASP.Net webform which includes AJAX Modelpoup Extender and jquery nepali-datepicker. I have to integrate nepali-datepicker to a textbox that is inside my second modelpopup i.e. with blue background shown in image below. Problem I am facing is that I am not able to position datepicker at bottom of textbox

Based on answers on the post(How to change the pop-up position of the jQuery DatePicker control) I was able to bring datepicker in front of 2nd model popup. Is there a way that I can use to actually position datepicker to the textbox.

Here is my script and styles:

<script type="text/javascript">        
    function pageLoad() {
        $('.nepali-calendar').nepaliDatePicker();
    }

    $(document).ready(function () {
        $('.nepali-calendar').nepaliDatePicker();

    });
</script>    

<style type="text/css">
    div#ndp-nepali-box
    {
        position:absolute;
        z-index: 999999;
    }
</style>

Following image shows how it is is positioned right now.enter image description here

If I use position as relative.

<style type="text/css">
    div#ndp-nepali-box
    {
        position: relative;
        z-index: 999999;
    }
</style>

It looks like enter image description here

Is there a way that I can use to actually position datepicker to bottom of the textbox.

2
c#asp.net.netdatepickermodalpopupextender

2 Answers

6
votes

As you are using jquery UI Datepicker it should have beforeShow property and change css inside this property like below.

Check this fiddle

$('input.date').datepicker({
beforeShow: function(input, inst) {
 var cal = inst.dpDiv;
 var top  = $(this).offset().top + $(this).outerHeight();
 var left = $(this).offset().left;
 setTimeout(function() {
    cal.css({
        'top' : top,
        'left': left
    });
 }, 10);
}
});

Reference

0
votes

Try relative position:

<style type="text/css">
    div#ndp-nepali-box
    {
        position: relative;
        z-index: 999999;
    }
</style>

I don't know, what is div#ndp-nepali-box, but try to do this:

<style type="text/css">
    .ui-datepicker
    {
        position: relative;
        z-index: 999999;
    }
</style>

it can be important