如何在剑道网格中将分页框显示为垂直？

Question

如何在剑道网格中将分页框显示为垂直

Answer 1

我通过使用“transform：rotate（xxxdeg）”

改变CSS来实现这一目标

但我仍然无法将寻呼机保持在网格的右侧。

如果有人知道解决方案，请提供解决方案。

Kendo Grid

    .k-pager-wrap {
        transform: rotate(90deg);
    } 
    .k-pager-wrap .k-pager-nav{ 
        transform: rotate(360deg); 
    } 
    .k-pager-wrap .k-pager-numbers li{ 
        transform: rotate(270deg);
    } 
    .k-pager-sizes{
        transform: rotate(180deg);
    } 
    .k-pager-sizes .k-input, .k-pager-sizes .k-select{
        transform: rotate(90deg);
    } 
    .k-pager-info{
        transform: rotate(180deg);
    } 
    .k-pager-numbers .k-state-selected{
        color: #fff; background: #454544;
    }

Answer 2

<强>的Javascript

function setPagerPoistion() {
    console.log('---- Set Pager');
    var transactionItemGridLayout = angular.element('transaction-item-grid .transaction-item-grid-layout');
    var g = angular.element('transaction-item-grid div.k-grid');
    // find grid offset
    var go = g.offset();
    // find grid position
    var gp = g.position();  
    var gridHeader = angular.element("transaction-item-grid .k-grid-header");
    var gridContent = angular.element("transaction-item-grid .k-grid-content");
    var gridPager = angular.element("transaction-item-grid .k-grid-pager"); 
    // occupy grid empty space with grid content
    gridContent.height(g.height() - gridHeader.height());
    console.log('transactionItemGridLayout.width() ', transactionItemGridLayout.width());
    console.log('go.left ', go.left, 'go.top ',go.top); 
    // Reduce grid width to fit pager at right hand side of the gird, because pager height is 30px
    g.width(transactionItemGridLayout.width() - 40);    
    // Pager Reverse, because of pager rotated
    gridPager.height(30);   
    // Pager Reverse, because of pager rotated
    gridPager.width((gridHeader.height() + gridContent.height()) - 10);
    gridPager.offset({ top: go.top, left: go.left + transactionItemGridLayout.width()-40 });
};

function setPagerPoistion() { console.log('---- Set Pager'); var transactionItemGridLayout = angular.element('transaction-item-grid .transaction-item-grid-layout'); var g = angular.element('transaction-item-grid div.k-grid'); // find grid offset var go = g.offset(); // find grid position var gp = g.position(); var gridHeader = angular.element("transaction-item-grid .k-grid-header"); var gridContent = angular.element("transaction-item-grid .k-grid-content"); var gridPager = angular.element("transaction-item-grid .k-grid-pager"); // occupy grid empty space with grid content gridContent.height(g.height() - gridHeader.height()); console.log('transactionItemGridLayout.width() ', transactionItemGridLayout.width()); console.log('go.left ', go.left, 'go.top ',go.top); // Reduce grid width to fit pager at right hand side of the gird, because pager height is 30px g.width(transactionItemGridLayout.width() - 40); // Pager Reverse, because of pager rotated gridPager.height(30); // Pager Reverse, because of pager rotated gridPager.width((gridHeader.height() + gridContent.height()) - 10); gridPager.offset({ top: go.top, left: go.left + transactionItemGridLayout.width()-40 }); };