title: JQuery UI DatePicker Covering Controls Below
body: <p>I have a set of two date fields where the JQuery UI DatePicker is covering up the controls below.  How do I set the ZIndex or Position of the DatePicker so it does not collide with the controls? I am using FireFox. </p>
  
  <p>Here is my JSFiddle:
  <a href="http://jsfiddle.net/pNP22/4/" rel="nofollow">http://jsfiddle.net/pNP22/4/</a></p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div class="editor-label"&gt;
          &lt;label for="StartDate"&gt;Choose Start Date&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          &lt;input id="StartDate" name="StartDate"  type="text" value="" /&gt;
          &lt;span class="field-validation-valid" data-valmsg-for="StartDate" data-valmsg-replace="true"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
          &lt;label for="EndDate"&gt;Choose End Date&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          &lt;input id="EndDate" name="EndDate" type="text" value="" /&gt;
          &lt;span class="field-validation-valid" data-valmsg-for="EndDate" data-valmsg-replace="true"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
          &lt;label for="SiteLocation"&gt;Choose Site Location&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          &lt;select data-val="true" data-val-required="The Choose Site Location field is required." id="SiteLocation" name="SiteLocation"&gt;&lt;option value=""&gt;-- Please Select --&lt;/option&gt;
  &lt;option value="fce39672-cf3b-40c4-bae9-a0e800fb193c"&gt;Columbus, US&lt;/option&gt;
  &lt;option value="ed567544-ea5e-4cb7-9be7-a2030040e017"&gt;Granada&lt;/option&gt;
  &lt;option value="8e9630b4-db21-4a35-9894-a17e000b4eb7"&gt;Singapore&lt;/option&gt;
  &lt;/select&gt;  
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
          &lt;label for="RequestNumber"&gt;Request #&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          &lt;input class="text-box single-line" data-val="true" data-val-number="The field Request # must be a number." id="RequestNumber" name="RequestNumber" type="text" value="" /&gt;
          &lt;span class="field-validation-valid" data-valmsg-for="RequestNumber" data-valmsg-replace="true"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
          &lt;label for="Commodity"&gt;Commodity&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          &lt;input class="text-box single-line" id="Commodity" name="Commodity" type="text" value="" /&gt;
          &lt;span class="field-validation-valid" data-valmsg-for="Commodity" data-valmsg-replace="true"&gt;&lt;/span&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is my Javascript:</p>
  
  <pre><code>    $('#StartDate').datepicker();
      $('#EndDate').datepicker();
  </code></pre>