Скрыть горизонтальную полосу прокрутки (Angular ui-grid)

Ответ 1

В последней версии Github v3.0.0-rc.16 вы можете отключить горизонтальную и вертикальную полосу прокрутки отдельно. Вместо

enableScrollbars = false;

использование

enableHorizontalScrollbar = value; 
enableVerticalScrollbar = value;

с

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

UPDATE: Если вы хотите использовать константы вместо целочисленного значения, посмотрите на соответствующий пост:

Использование констант ui-grid для отключения полос прокрутки

UPDATE: В настоящее время опция WHEN_NEEDED недоступна. Возможно, это будет изменено снова, поэтому, пожалуйста, найдите доступные константы в исходном коде.

Константы определены в

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

Ответ 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

С помощью этого решения мы можем легко показать горизонтальную полосу.

Ответ 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. Кроме того, вы должны установить прописную строку ui-grid-header (в этом примере - 17px) на ширину полосы прокрутки браузера с помощью javascript на определенных событиях: количество строк изменено, размер контейнера и т.д. Ширина полосы прокрутки = ui- grid-viewport offsetWidth - clientWidth. Использование жестко заданного значения ширины полосы прокрутки плохо, потому что для разных браузеров для этого существуют разные (и даже настраиваемые) значения.