隐藏水平滚动条（角度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。使用滚动条宽度的硬编码值是不好的，因为不同的浏览器具有不同（甚至可配置）的值。