Ocultar barra de desplazamiento horizontal (Angular ui-grid)

Estoy tratando de ocultar la barra de desplazamiento horizontal de una cuadrícula angular de interfaz de usuario, pero no puedo encontrar la propiedad correcta. (Property enableScrollbars=false elimina ambos.)
¿Es posible eliminar solo la barra de desplazamiento horizontal?

Author: Andreas N., 2014-09-24
Source

3 answers

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

enableScrollbars = false;

Use

enableHorizontalScrollbar = value; 
enableVerticalScrollbar = value;

Con

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

ACTUALIZACIÓN: Si desea utilizar constantes en lugar del valor entero, mire el mensaje correspondiente:

Uso de 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 cambie de nuevo, así que por favor 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

 57
Author: nabinca,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:34:15

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 simplificar, solo tenemos que 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 flexible, podemos usar la clase CSS y jQuery. Primero, añadimos una clase más:

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

En el 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 seleccionar y agrupar ( http://i.imgur.com/veevhgQ.png ), nosotros uso:

$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.

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

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

 4
Author: Envy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-03 02:37:09

Si se le permite utilizar 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 tienes que establecer el padding-right de ui-grid-header (que es 17px en este ejemplo) al ancho de la barra de desplazamiento de tu navegador con javascript en ciertos eventos: número de filas cambiadas, tamaño del contenedor, etc. Scrollbar width = ui-grid-viewport's offsetWidth-clientWidth. Usar un valor codificado para el ancho de la barra de desplazamiento es malo porque es diferente los navegadores tienen valores diferentes (e incluso configurables) para eso.

 0
Author: Dmitry S.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-31 13:50:52