隱藏水平滾動條（角度ui網格）

Question

我想隱藏角度ui網格的水平滾動條，但我找不到合適的屬性。 （屬性enableScrollbars = false刪除兩者。）
是否可以只刪除水平滾動條？

Answer 1

使用Github v3.0.0-rc.16上的最新版本，可以單獨禁用水平和垂直滾動條。如果你想使用常量，而不是整數值，看看相應的後 ： 而不是

enableScrollbars = false; 

使用

enableHorizontalScrollbar = value; 
enableVerticalScrollbar = value; 

與

value = 0; /* NEVER */ 
value = 1; /* ALWAYS */ 
value = 2; /* WHEN_NEEDED */ 

UPDATE

Using ui-grid constants to disable scrollbars

UPDATE： 似乎WHEN_NEEDED沒有可用的時刻選項。 也許這會再次改變，所以請在源代碼中查找可用的常量。

的常量在

https://github.com/angular-ui/ui-grid/blob/master/src/js/core/constants.js

Answer 2

定義在目前，似乎WHEN_NEEDED不是選項可用的時刻（UI格3.1.1）。所以，我曾通過周圍jQuery和CSS：

對於簡單，我們只需要做到這一點：

.ui-grid .ui-grid-render-container-body .ui-grid-viewport { 
    overflow-x: auto !important; 
    /* or use: overflow-x: hide!important; */ 
} 

要更加靈活，我們可以使用CSS類和jQuery。首先，我們再增加一個類：

.ui-grid-render-container-body .ui-grid-viewport.no-horizontal-bar { 
    overflow-x: hidden !important; 
} 

在控制器中，我們將通過jQuery的使用這個類：

$timeout(function(){ 
    if (!!$scope.gridOptions.data) { 
     $('.ui-grid-render-container-body .ui-grid-viewport').addClass("no-horizontal-bar"); 
    } 
}); 

要隱藏空白間隙時使用選擇和分組（http://i.imgur.com/veevhgQ.png），我們使用：

$timeout(function(){ 
    if (!!$scope.gridOptions.data) { 
     /* To hide the blank gap when use selecting and grouping */ 
     $('.ui-grid-render-container-left .ui-grid-viewport').height($('.ui-grid-render-container-left .ui-grid-viewport').height() + 17); 
     $('.ui-grid-render-container-body .ui-grid-viewport').addClass("no-horizontal-bar"); 
    } 
}); 

當我們使用選擇和分組功能時，17px是間距的高度。

演示：http://plnkr.co/edit/D9PKPkvuRy2xA6UNNXCp?p=preview

有了這個解決方案，我們可以輕鬆地再次顯示單槓。

Answer 3

如果你被允許使用flexboxes：

.ui-grid-render-container-body { 
    .ui-grid-header { 
     padding-right: 17px; 

     .ui-grid-header-viewport { 
     width: 100%; 

     .ui-grid-header-canvas { 
      width: 100%; 

      .ui-grid-header-cell-wrapper { 
      display: block; 
      width: 100%; 

      .ui-grid-header-cell-row { 
       display: flex; 
       min-width: 0; 

       .ui-grid-header-cell { 
       flex: 1 1 0; 
       min-width: @col-min-width; 
       } 
      } 
      } 
     } 
     } 
    } 

    .ui-grid-viewport { 
     overflow: auto !important; 
     display: flex; 

     .ui-grid-canvas { 
     flex: auto; 
     min-width: 0; 

     [role="row"] { 
      display: flex; 
      min-width: 0; 

      .ui-grid-cell { 
      flex: 1 1 0; 
      min-width: @col-min-width; 
      } 
     } 
     } 
    } 
    } 

當COL-最小寬度是，你會在gridOptions通常設定的minWidth。您還必須將ui-grid-header的填充權（在此示例中爲17px）設置爲瀏覽器滾動條的寬度，並在特定事件上使用javascript：更改了行數，調整了容器大小等。滾動條寬度= ui- grid-viewport的offsetWidth - clientWidth。使用滾動條寬度的硬編碼值是不好的，因爲不同的瀏覽器具有不同（甚至可配置）的值。