jquery datepicking default positioning

Question

I am stuck trying to figure out why my jquery datepicker is showing up above the input field instead of below it.

Here is the link --> http://jsfiddle.net/HerrLoop/dVfP2/3/

Click on the input field.

Note that if you change the main h1 tag to:

    <h1></h1>

Then the datepicker loads up as it should, below the input field.

Why is this?

Thanks for your help.

It adjusts and shows up where space is available. Have a look here http://stackoverflow.com/questions/662220/how-to-change-the-pop-up-position-of-the-jquery-datepicker-control — Deadlock, Apr 13 '13 at 14:03

score 1 · Answer 1 · answered Apr 13 '13 at 14:10

1

This is caused by the positioning of the element onscreen which is your datepicker. If you move the datapicker element to be your first input you will see it will appear below on click.

answered Apr 13 '13 at 14:10

Daniel Jordan

276
1
3

score 0 · Answer 2 · answered Apr 13 '13 at 14:08

0

You can position your datepicker like this :

.ui-datepicker { 
  position:relative !important;
  margin-left: 0px;
  margin-top: 0px
}

Fiddle

answered Apr 13 '13 at 14:08

Adil Shaikh

44,509
17
89
111

jquery datepicking default positioning

2 Answers2