Question

我试图隐藏Angular ui-grid的水平滚动条，但我无法找到合适的属性。（Property 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 */

<强>更新如果要使用常量而不是整数值，请查看相应的帖子：

Using ui-grid constants to disable scrollbars

<强>更新 WHEN_NEEDED选项目前似乎不可用。也许这会再次改变，所以请在源代码中查找可用的常量。

常量在

中定义

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

Answer 2

现在，选项WHEN_NEEDED目前似乎无法使用（ui-grid 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-min-width是您通常在gridOptions中设置的minWidth。此外，您必须将ui-grid-header的填充权限（在此示例中为17px）设置为浏览器滚动条的宽度，并在某些事件上使用javascript：行数已更改，容器调整大小等。滚动条宽度= ui-grid-viewport的offsetWidth - clientWidth。使用硬编码的滚动条宽度值是不好的，因为不同的浏览器具有不同（甚至可配置）的值。

隐藏水平滚动条（Angular ui-grid）

3 个答案: