angular-ui-grid - gridoptions - ui-grid columndefs

Ocultar barra de desplazamiento horizontal(ui-rejilla angular)

Question

Estoy tratando de ocultar la barra de desplazamiento horizontal de una ui-grid Angular, pero no puedo encontrar la propiedad correcta. (La propiedad enableScrollbars = false elimina ambos.)
¿Es posible eliminar solo la barra de desplazamiento horizontal?

Answer 1

Con la última versión en Github v3.0.0-rc.16 puede deshabilitar la barra de desplazamiento horizontal y vertical por separado. En lugar de

enableScrollbars = false;

utilizar

enableHorizontalScrollbar = value; 
enableVerticalScrollbar = value;

con

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

ACTUALIZACIÓN: Si desea usar constantes en lugar del valor entero, mire la publicación correspondiente:

Usando las constantes de ui-grid para deshabilitar las barras de desplazamiento

ACTUALIZACIÓN: la opción WHEN_NEEDED no parece estar disponible en este momento. Tal vez esto se volverá a cambiar, así que busque las constantes disponibles en el código fuente.

Las constantes se definen en

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

Answer 2

En este momento, la opción WHEN_NEEDED no parece estar disponible en este momento (ui-grid 3.1.1). Así que he trabajado alrededor de jQuery y CSS:

Para simple, solo necesitamos hacer esto:

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

Para ser más flexibles, podemos usar CSS class y jQuery. Primero, agregamos una clase más:

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

En controlador, usaremos esta clase por jQuery:

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

Para ocultar el espacio en blanco al usar la selección y agrupación ( http://i.imgur.com/veevhgQ.png ), usamos:

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

Con 17px es la altura de la brecha cuando usamos la función de selección y agrupación.

Demostración: http://plnkr.co/edit/D9PKPkvuRy2xA6UNNXCp?p=preview

Con esta solución podemos mostrar la barra horizontal de nuevo fácilmente.

Answer 3

Si tienes permiso para usar 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;
          }
        }
      }
    }
  }

Donde col-min-width es un minWidth que normalmente establecería en las gridOptions. También tiene que configurar el derecho de relleno del encabezado de la cuadrícula-ui (17px en este ejemplo) al ancho de la barra de desplazamiento de su navegador con el javascript en ciertos eventos: número de filas cambiado, tamaño del contenedor, etc. ancho de la barra de desplazamiento = ui- offsetWidth de grid-viewport - clientWidth. El uso de un valor codificado para el ancho de la barra de desplazamiento es malo porque los diferentes navegadores tienen valores diferentes (e incluso configurables) para eso.