angular-ui-grid - 水平スクロールバーを非表示 (Angular ui-grid)

Question

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

Answer 1

現時点では、オプション 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

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