Question

I am actually having a list of text boxes. I am using below code to load a date picker at each text box location when the text box is in focus. But If I click on top text boxes the date picker is loading at the background of the below text boxes even though it is starting at the clicked text box. I think this is css conflict of my css and ui’s.

Javascript:

<link type="text/css" href="JQUERY/development-bundle/themes/base/ui.all.css" rel="stylesheet" />

    function pickdate(dateflag,val)
      {
      $("#stdatepicker").datepicker({ dateFormat: 'yy-mm-dd' });
      }

HTML:

<div id="centrecontent">
<table>
  <tr><td>  <input type="text" id="enddatepicker0" name="Workeddate0" onfocus="pickdate(2,0)" /></td></tr>
</table>
</div>

This I am repeating in a table rows format. These rows are loaded into a div along with some other text. So what am I missing here. How can I load the date picker above all divs and above all textboxes. Thanks in advance.

Edit:

CSS:

    div.#centrecontent
        {
         background-image:url("/images/bluecyan3.gif");
         background-repeat:no-repeat;
        }
        table
        {
                font-size:13px;
         font-family:arial;
        }
        div,p  {margin-top:0}/*clear top margin for mozilla*/
        * html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
        #centrecontent {position:relative;
`**EDIT** /*this is the culprit*//*z-index:1*/`}
        }
th
{
 background:url("/images/menubutton.jpg");
}

Answer 1

Do you have any styles applied to the textbox themselves? Or to their containers? It is possible that the z-index of the textbox is set high for some reason. I think the z-index of the ui-datepicker must be higher. Maybe you can try this:

input{
  z-index:1;
}