使用Angular ui网格缺少分页下拉图标

时间:2015-12-03 15:04:13

标签: angularjs pagination angular-ui-grid

我正在使用Angular ui-grid开发一个分页表。但不知何故,我错过了分页下拉列表中的下拉箭头,如下图所示。

enter image description here

当我点击它时,它会像下拉列表一样打开,但我需要向下箭头指示它是一个下拉列表。

我正在使用以下css库

<link rel="stylesheet" ng-href="libs/bootstrap/3.3.6/css/paper.bootstrap.min.css">
<link rel="stylesheet" type="text/css" title="Style" href="libs/angular/ui-grid/3.0.7/ui-grid.min.css">

我将gridOptions配置如下

paginationPageSizes: [10, 20, 50],
paginationPageSize: 10,
data: 'historyData',
enableCellSelection: true,
enableFiltering: true,
enableHorizontalScrollbar: 1,
treeRowHeaderAlwaysVisible: false,
showTreeRowHeader: true,
enableGridMenu: true,
exporterMenuCsv: false,
exporterMenuPdf: false,

以下是我的HTML代码

<div class="container">

<div id="gridDiv" 
    style="-webkit-animation: slideInRight 0.3s; -moz-animation: slideInRight 0.3s; animation: slideInRight 0.3s;">
    <div id="historyGrid" ui-grid="gridOptions" ui-grid-edit
        ui-grid-cellnav ui-grid-move-columns ui-grid-resize-columns
        ui-grid-save-state ui-grid-pagination ui-grid-pinning
        ui-grid-grouping ui-grid-exporter class="grid"></div>
    <div class="watermark" ng-show="!historyData.length">No upload
        history available</div>
    <div>
        <p>
            <img ng-src="{{contextRoot+'pics/addScanIcon.svg'}}"
                alt="addScanIcon"
                style="width: 25px; height: 25px; cursor: pointer" /> <span>
                Click the icon for a specific policy to upload additional documents
                to policy.</span>
        </p>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

当我在下面添加css

时,它正在工作
.ui-grid-pager-row-count-picker select {
    -webkit-appearance: menulist;
}

或者只是添加背景箭头图像

.ui-grid-pager-row-count-picker select {    
    background-image: url("../pics/select_arrow.png");
}