角度のあるUIグリッドフィルタヘッダセルスタイル？

Question

私はAngular UI-Gridを使っています。すべての関数が正常に動作し、今はスタイリングに取り組んでいます。私が達成しようとしている何

ではなく、私はあなたが私はちょうど1行で範囲フィルターを作りたい見ることができるよう

だから、このビューを取得したい

この見解です。インターネットでの私の検索はすべて失敗しました。私は日付ピッカーの範囲のための情報のいくつかの並べ替えを発見したが、私はそれがはるかに単純にする必要があると信じて、ちょうど1つの列にいくつかのCSSルールを追加します。

cellClassを介して行に影響を与えることができ、私は同じ方法でheaderCellClassを介して影響を及ぼそうとしましたが、動作しません。カスタムテンプレートを作成せずにこのヘッダーに影響を与える方法はありますか？ ありがとうございます。

私の列定義：

$scope.gridOptions.columnDefs = [ 
     { 
      displayName: 'Name', 
      field: 'name', 
      width: '20%', 
      cellClass: getCellClass 
     }, 
     { 
      field: 'description', 
      width: '30%', 
      cellClass: getCellClass 
     }, 
     { 
      field: 'strict', 
      filter: { 
       type: uiGridConstants.filter.SELECT, 
       selectOptions: [ 
        {value: true, label: 'strict'}, 
        {value: false, label: 'non-strict'} 
       ] 
      }, 
      cellClass: getCellClass 
     }, 
     { 
      displayName: 'Length', 
      field: 'maxSize', 
      filters: [ 
       { 
        name: 'From', 
        condition: uiGridConstants.filter.GREATER_THAN_OR_EQUAL, 
        placeholder: "from" 
       }, 
       { 
        name: 'To', 
        condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL, 
        placeholder: "to" 

       } 
      ], 
      headerCellClass: $scope.highlightFilteredHeader, 
      cellClass: getCellClass 
     }, 
     { 
      field: 'Actions', 
      cellClass: getCellClass, 
      cellTemplate: "includes/grid/columnAction.html" 
     } 
    ]; 


    $scope.highlightFilteredHeader = function (row, rowRenderIndex, col, colRenderIndex) { 
       return 'ui-grid-header-custom'; 
     }; 

これはあなたが、私はそれに影響を与えるための方法を発見した私の問題

Answer 1

を見つけることができますplunkerですが、私はカスタムクラスを追加し、このクラスを通して、私は上の影響を与えることができます内部要素。これは私の作業コードです。

$scope.highlightFilteredHeader = function (row, rowRenderIndex, col, colRenderIndex) { 

     if (col.displayName == 'Length') { 
      return 'inline-filter'; 
     } else if (col.filters[0].term) { 
      return 'header-filtered'; 
     } else { 
      return '' 
     } 
    }; 

CSS

.inline-filter .ui-grid-filter-input-0{ 
    width: 40% !important; 
    float: left; 
    margin-left: 10px !important; 
} 
.inline-filter .ui-grid-filter-input-1{ 
    width: 40% !important; 
    float: left; 
    margin-top: -8px !important; 
    margin-left: 5px !important; 
} 
.inline-filter .ui-grid-filter-container .ui-grid-filter-button { 
    top: 15px !important; 
} 
@media only screen and (max-width: 750px) { 
    .inline-filter .ui-grid-filter-input-0{ 
     margin-left: 0 !important; 
    } 
}