Hide horizontal scrollbar (Angular ui-grid)

Question

I'm trying to hide the horizontal scrollbar of a Angular ui-grid, but I can't find the right property. (Property enableScrollbars=false removes both.)
Is it possible to remove only the horizontal scrollbar?

Haller

Answer 1

With the latest version on Github v3.0.0-rc.16 you can disable horizontal and vertical Scrollbar separately. Instead of

enableScrollbars = false;

use

enableHorizontalScrollbar = value; 
enableVerticalScrollbar = value;

with

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

UPDATE: If you want to use constants instead of the integer-value, look at corresponding post:

Using ui-grid constants to disable scrollbars

UPDATE: The option WHEN_NEEDED doesn't seem to be available at the moment. Maybe this will be changed again, so please look for the available constants in the source code.

The Constants are defined in

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

Barrie

Hi @Barrie Its a very old story but the value 2 'WHEN_NEEDED' doesn't seem to be available in ui-grid constants or am I missing it? – Dillard

Yes, you are right. WHEN_NEEDED isn't available (at the moment). There are always some issues concerning scrollbars - updated my answer! – Barrie

I had an issue where the columns would not span the proper width (leaving space for the vertical scroll). I used ng-if to hide the grid on page load and then show it after the grid was initialized. I saw some use $scope.gridApi.core.handleWindowResize(); within a timeout instead to fix this issue. – Excommunication

Answer 2

At now, the option WHEN_NEEDED doesn't seem to be available at the moment (ui-grid 3.1.1). So I have worked around by jQuery and CSS:

For simple, we just need do this:

.ui-grid .ui-grid-render-container-body .ui-grid-viewport {
    overflow-x: auto !important;
    /* or use: overflow-x: hide!important; */
}

To more flexible, we can use CSS class and jQuery. First, we add one more class:

.ui-grid-render-container-body .ui-grid-viewport.no-horizontal-bar {
    overflow-x: hidden !important;
}

In controller, we will use this class by jQuery:

$timeout(function(){
    if (!!$scope.gridOptions.data) {
        $('.ui-grid-render-container-body .ui-grid-viewport').addClass("no-horizontal-bar");
    }
});

To hide the blank gap when use selecting and grouping (https://i.sstatic.net/BC72s.png), we use:

$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");
    }
});

With 17px is height of the gap when we use selecting and grouping feature.

Demo: http://plnkr.co/edit/D9PKPkvuRy2xA6UNNXCp?p=preview

With this solution we can show the horizontal bar again easily.

Lydialydian

Answer 3

If you are allowed to use 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;
          }
        }
      }
    }
  }

Where col-min-width is a minWidth that you would normally set in the gridOptions. Also you have to set the ui-grid-header's padding-right (which is 17px in this example) to the width of your browser's scrollbar with the javascript on certain events: number of rows changed, container resized etc. Scrollbar width = ui-grid-viewport's offsetWidth - clientWidth. Using a hardcoded value for scrollbar width is bad because different browsers have different (and even configurable) values for that.

Scibert