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.