剑道用户界面错误？剑道网格寻呼机未与网格底部对齐

Question

最近，我一直在使用 Kendo UI，但遇到了以下问题：我的 Kendo 网格的寻呼机与网格底部不齐平。我尝试编辑 k-grid-pager 的 CSS 样式，但并没有解决问题。为了进一步澄清，在我将寻呼机的上边距设置为 450 像素之前，寻呼机位于左上角（简单地将其向下移动）。但是，我想要一个动态的修复，因为它可以适应网格的整体高度。还要注意浮动到一侧的黑色边框 - 这是寻呼机的一部分，如何？他们一定是对我隐瞒了一堂课……或者我只是不知道。无论如何，这是我的混乱网格的图像： 我用来修改网格及其样式的 CSS 代码：

    #konTable2 {
        position:absolute;
        left: 150px;
        margin-right: -50%;
        background-color: rgba(0,0,0,0);
        border:0px solid rbga(0,0,0,0);
    }
    .k-grid tr th {
        border-bottom: 1px solid black;
        text-align: center;
        height:25px;
    }
    .k-grid tr td{
        background-color: #494949;
        border-bottom: 1px solid black;
        text-align: left;
        mix-blend-mode:hard-light;
    }
    .k-grid-pager {
        position: relative !important;
        float: left !important;
        background-color: lime;
        width:900px;
        left:50%;
        margin-right: -450px;
        margin-top:450px;
    }

最后是用于布局网格的 html/js：

    <div id="konTable2"></div>
    <script src="../json/Koncerts.jsonp"></script>
    <script type="text/javascript">
    var myConcerts = concerts;
    $(function() {

        var dataSource = new kendo.data.DataSource({
            data: myConcerts    
        });

      $('#konTable2').kendoGrid({
        columns: [{ title: "Artist", field: "artist", template: "<div class='name' style='width:200px'>#= artist #</div>"},
                {title: "Concert", field: "concert", template: "<div class='name' style='width:250px'>#= concert #</div>"},
                {title: "Date", field: "date", template: "<div class='date' style='width:150px'>#= date #</div>"},
                {title: "City", field: "location.city", template: "<div class='name' style='width:150px'>#= location.city #</div>"},
                {title: "State", field: "location.state",template: "<div class='name' style='width:150px'>#= location.state #</div>"}
                ],
        dataSource: {
            data: myConcerts,
            pageSize: 5
        },
        selectable: true,   
        sortable: true,
        scrollable: false,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
    });
});
</script>

更新

我已经修改了 CSS。我现在主要是修改k-pager-wrap来改变我的寻呼机的定位，看起来好一点，更像这样： 注意：我没有像前面的例子那样包含垂直平移。现在您可以看到寻呼机只是想在网格的左上角冷却...此外，这里是新的相关 CSS：

    .k-pager-wrap {
        width:900px;
        position: relative;
        float:right;
        left:50%;
        margin-right: -450px;
        mix-blend-mode: normal !important;
    }
    .k-grid-pager {
        width:900px;
    }

Answer 1

帖子关闭

我意识到我在使用剑道之前已经忘记了 html 表格元素的 css 样式...耶！

这是我忘记的代码：

            table, .gridStyle {
            font-size:2em; !important;
            text-align:center; !important;
            position:absolute;
            float:left; !important;
            width:1200px; !important;
            left:50%; !important;
            margin-left:-600px;
            margin-top:20px; !important;
            height:80px; !important;
            background-color:lightgrey; 
            }
            .gridStyle {
            font-size:26px !important;
            height:290px;
            border:1px solid aliceblue;
            }
            th{
            background-color:lightgrey;
            border:2px solid grey; !important;
            text-align:center;
            border-radius:0px;
            padding:4px;
            mix-blend-mode:normal;
            font-color:lightgrey;!important;
            word-wrap:normal;}
            td{
            background-color:lightgrey;
            border:2px solid grey; !important;
            text-align:center; !important;
            border-radius:0px;
            padding:4px;
            mix-blend-mode:normal;
            word-wrap:normal;}
            tr{border-width:2px; !important;}