Q:

Jquery datepicker icon position is incorrect

My calendar image is positioned below the text box of my datepicker. How can I solve this misalignment.
This is a screenshot of my screen: ! 1: http://i.stack.imgur.com/3uifN.jpg
See the jsfiddle here: jsfiddle.net/njiterry/yNw3C/8477
This is my jsp code:
     <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
         pageEncoding="ISO-8859-1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Country Visibility</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>

<script src="js/grid.locale-en.js" type="text/javascript"></script>

<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(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});

});

</script>
</head>
<body>
<table id="pays_grid"></table>
<div id="pager"></div>
</body>
</html>

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. 

A:

It seems to me that you should use
.ui-jqgrid .ui-search-table .ui-search-input > input,
.ui-jqgrid .ui-search-table .ui-search-input > select,
.ui-jqgrid .ui-search-table .ui-search-input > img {
    vertical-align: middle;
    display: inline-block;
}

See http://jsfiddle.net/yNw3C/8486/

