title: Jquery datepicker icon position is incorrect
body: <p>My calendar image is positioned below the text box of my datepicker. How can I solve this misalignment.</p>
  
  <p>This is a screenshot of my screen: ! <a href="http://i.stack.imgur.com/3uifN.jpg" rel="nofollow">1</a>: <a href="http://i.stack.imgur.com/3uifN.jpg" rel="nofollow">http://i.stack.imgur.com/3uifN.jpg</a></p>
  
  <p>See the jsfiddle here: jsfiddle.net/njiterry/yNw3C/8477</p>
  
  <p>This is my jsp code:</p>
  
  <pre><code>     &lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
           pageEncoding="ISO-8859-1" %&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Country Visibility&lt;/title&gt;
  
  &lt;link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.min.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /&gt;
  
  &lt;script src="js/jquery-1.11.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script src="js/grid.locale-en.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script src="js/jquery.jqGrid.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  
  $(document).ready(function(){
  
      var mydata = [
          { Sel: true, Country : "Germany", Capital : "Berlin", Date: "05-09-2014"},
          { Sel: true, Country : "France", Capital : "Paris", Date: "05-09-2014" },
          { Sel: true, Country : "Cameroon", Capital : "Yaounde", Date: "06-09-2014" },
          { Sel: true, Country : "Gabon", Capital : "Libreville", Date: "06-09-2014" },
          { Sel: true, Country : "Holland", Capital : "Amsterdam", Date: "07-09-2014" },
          { Sel: true, Country : "Japan", Capital : "Tokyo", Date: "08-09-2014" },
          { Sel: true, Country : "Italy", Capital : "Rome" , Date: "09-09-2014"},
          { Sel: true, Country : "Spain", Capital : "Madrid" , Date: "09-09-2014"},
          { Sel: true, Country : "England", Capital : "London" , Date: "10-09-2014"},
          { Sel: true, Country : "US", Capital : "Washington D.C." , Date: "12-09-2014"}
      ];
  
      var grid = jQuery("#pays_grid");
  
      var initDateWithButton = function (elem) {
          if (/^\d+%$/.test(elem.style.width)) {
              // remove % from the searching toolbar
              elem.style.width = '';
          }
          // to be able to use 'showOn' option of datepicker in advance searching dialog
          // or in the editing we have to use setTimeout
          setTimeout(function () {
              $(elem).datepicker({
                  dateFormat: 'dd-mm-yy',
                  showOn: 'button',
                  changeYear: true,
                  changeMonth: true,     
                  buttonImageOnly: true,
                  buttonImage: "images/calendar.gif",
                  buttonText: "Select date",            
                  onSelect: function (dateText, inst) {
                      if (inst.id.substr(0, 3) === "gs_") {
                           grid[0].triggerToolbar();
                      }
                      else {
                          // to refresh the filter
                          $(inst).trigger("change");
                      }
                  }
              });
  
          $(".ui-datepicker-trigger").css({
              position: "relative",
              marginLeft: "1px",
              marginTop: "0px",
              });
          }, 100);
      };
      grid.jqGrid({ //set your grid id
      data: mydata, //insert data from the data object we created above
      datatype: 'local',
      height: 230,
      autoheight: true,
      width: 800,
      rowNum: 10,
      rowList: [1, 5, 10],
  
      colNames:['Sel.','Id','Name', 'Date'], //define column names
      colModel:[
         {name: 'Sel', align: 'center', sortable: false, width: 25, search: false, editable: true, edittype: 'checkbox', 
                editoptions: { value: "True:False" }, formatter: "checkbox", formatoptions: { disabled: false} },
         {name:'Country', index:'Country', key: true, width:50, align:'center'},
         {name:'Capital', index:'Capital', width:100, align:'center'},
         {name: 'Date', index: 'Date', align: 'center', width: 100}
      ], //define column models
  
      pager: '#pager', //set your pager div id
      sortname: 'Country', //the column according to which data is to be sorted; optional
      viewrecords: true, //if true, displays the total number of records, etc. as: "View X to Y out of Z” optional
      sortorder: "asc", //sort order; optional
      sortname: 'Country',
      shrinkToFit: true,
      forceFit: true,
      caption: "Country Overview", //title of grid
      loadComplete: function() { 
          grid.jqGrid('setColProp', 'Date', {
              sorttype: 'date', editable: true,
                  editoptions: { dataInit: initDateWithButton, size: 11 },
                  searchoptions: {
                      sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
                      dataInit: initDateWithButton,
                    //  size: 8,          // for the advanced searching dialog
                     // attr: {size: 8}   // for the searching toolbar
                  }
          });   
          grid.jqGrid('filterToolbar', {autoSearch: true});
      }
      }).navGrid('#truck_grid_pager', {edit: false, add: false, del: false, search: false, refresh: true});
  
  
  });
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table id="pays_grid"&gt;&lt;/table&gt;
  &lt;div id="pager"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've tried looking at similar questions here on Stack Overflow but I can't get the trigger image to appear inline with the input. </p>