Question

我的日历图片位于我的日期选择器的文本框下方。我怎样才能解决这种错位。

这是我的屏幕截图：！ 1：http://i.stack.imgur.com/3uifN.jpg

请参阅此处的jsfiddle：jsfiddle.net/njiterry/yNw3C/8477

这是我的jsp代码：

     <%@ 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>

我已尝试在Stack Overflow上查看类似的问题，但我无法让触发图像与输入内联。

Answer 1

在包含日期的文本框中添加显示内联样式然后调整日期选择器图像的边距顶部，使其看起来很漂亮并与文本框对齐。

点击此处：http://jsfiddle.net/saxenaabhi6/yNw3C/8479/

#gs_Date{
display:inline
}

Answer 2

而不是设置

 position='relative'

设置

position='absolute'

并相应地调整顶部和左侧。这是一个小提琴：

http://jsfiddle.net/ey170t1z/1/

Answer 3

在我看来，你应该使用

.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;
}

请参阅http://jsfiddle.net/yNw3C/8486/

Answer 4

在CSS中：

.ui-datepicker-trigger {
 vertical-align: top;
 height: 24px; /* the same of textbox */
}

Jquery datepicker图标位置不正确

4 个答案: