Change Datepicker Position in Modelpopup Text Box

Question

I am working on an ASP.Net web form that includes the AJAX Modelpoup Extender and jquery nepali-datepicker . I need to integrate nepali-datepicker into a text box that is inside my second modelpopup with a blue background, as shown in the image below. The problem I am facing is that I cannot position the datepicker at the bottom of the textbox

Based on the responses to the message ( How to change the popup position of the jQuery DatePicker control ), I was able to cast the datepicker in front of the popup window of the second model, Is there a way I can use to actually place the datepicker in the text box.

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> 

The following image shows how it is located right now.

If I use position as relative .

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

Looks like,

Is there a way I can use to actually place the datepicker at the bottom of the text box.

Answer 1

Since you are using the jquery UI Datepicker , it must have a beforeShow property and modify the css inside this property, as shown below.

Tick 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); } }); 

Link

Answer 2

Try the relative position:

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

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

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

it may be important