web-dev-qa-db-ja.com

水平スクロールバーを非表示（角度UIグリッド）

Angular ui-gridの水平スクロールバーを非表示にしようとしていますが、正しいプロパティが見つかりません。プロパティenableScrollbars = falseは両方を削除します。 ）
水平スクロールバーのみを削除することは可能ですか？

angular-ui-grid
25
Andreas N.

Github v3.0.0-rc.16の最新バージョンでは、水平および垂直のスクロールバーを個別に無効にできます。の代わりに

enableScrollbars = false;

つかいます

enableHorizontalScrollbar = value; 
enableVerticalScrollbar = value;

と

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

UPDATE：integer-valueの代わりに定数を使用する場合は、対応する投稿をご覧ください。

i-grid定数を使用してスクロールバーを無効にする

UPDATE：オプションWHEN_NEEDEDは現在利用できないようです。これは再び変更される可能性があるため、ソースコードで使用可能な定数を探してください。

定数はで定義されます

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

59
nabinca

現在、オプション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を使用できます。最初に、もう1つのクラスを追加します。

.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

このソリューションを使用すると、水平バーを簡単に再表示できます。

4
Envy

フレックスボックスの使用が許可されている場合：

.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です。また、特定のイベントでのJavaScriptを使用して、ui-grid-headerのpadding-right（この例では17px）をブラウザのスクロールバーの幅に設定する必要があります。行数の変更、コンテナのサイズ変更など。グリッドビューポートのoffsetWidth-clientWidth。スクロールバーの幅にハードコードされた値を使用すると、ブラウザーごとに異なる（さらには構成可能な）値が設定されるため、不適切です。

0
Dmitry S.