Kendo UI 错误？ Kendo 网格寻呼机未与网格底部对齐

Question

最近，我一直在使用 Kendo UI，我运行遇到了以下问题：我的 Kendo 网格的寻呼机与底部不齐平我的网格。我试过编辑 k-grid-pager 的 CSS 样式，但它没有解决问题。为了进一步说明，在我将寻呼机的上边距设置为 450px（只是将其向下移动）之前，寻呼机曾经位于左上角。但是，我想要一个动态的修复程序，因为它可以适应网格的整体高度。还要注意漂浮到 side-that 的黑色边框是寻呼机的一部分，怎么样？他们一定是对我隐瞒了 class... 或者我只是不知道。无论如何，这是我搞砸的网格的图像： 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

POST 关闭

我意识到我在使用 kendo 之前忘记了 html table 元素的 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;}

Kendo UI 错误？ Kendo 网格寻呼机未与网格底部对齐

Kendo UI bug? Kendo grid pager not aligned with bottom of grid

css

frameworks

kendo-ui

kendo-grid

更新