Saltar al contenido

Ocultar barra de desplazamiento horizontal (cuadrícula de interfaz de usuario angular)

Hola, tenemos la solución a lo que buscabas, deslízate y la encontrarás aquí.

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

enableScrollbars = false;

usar

enableHorizontalScrollbar = value; 
enableVerticalScrollbar = value;

con

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

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

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

ACTUALIZAR:
La opción WHEN_NEEDED no parece estar disponible en este momento. Tal vez esto se cambie nuevamente, 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/packages/core/src/js/constants.js

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

Para simplificar, 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 la clase CSS y jQuery. Primero, agregamos 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 cuando usamos 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 del espacio 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 volver a mostrar la barra horizontal fácilmente.

Comentarios y puntuaciones

Recuerda que tienes concesión de agregar una reseña si descubriste tu dificultad .

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags :

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *