web-dev-qa-db-fra.com

Masquer la barre de défilement horizontale (grille ui angulaire)

J'essaie de masquer la barre de défilement horizontale d'une grille angulaire ui, mais je ne trouve pas la bonne propriété. (Property enableScrollbars = false supprime les deux.)
Est-il possible de supprimer uniquement la barre de défilement horizontale?

angular-ui-grid
25
Andreas N.

Avec la dernière version de Github v3.0.0-rc.16, vous pouvez désactiver séparément la barre de défilement horizontale et verticale . 

enableScrollbars = false;

utilisation

enableHorizontalScrollbar = value; 
enableVerticalScrollbar = value;

avec

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

UPDATE: Si vous voulez utiliser des constantes à la place de la valeur entière, regardez l'article correspondant:

Utilisation des constantes ui-grid pour désactiver les barres de défilement

UPDATE: L'option WHEN_NEEDED ne semble pas être disponible pour le moment . Peut-être que cela sera modifié à nouveau, veuillez donc rechercher les constantes disponibles dans le code source.

Les constantes sont définies dans

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

58
nabinca

À l'heure actuelle, l'option WHEN_NEEDED ne semble pas être disponible pour le moment (grille 3.1.1). J'ai donc travaillé avec jQuery et CSS:

Pour faire simple, il suffit de faire ceci:

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

Pour plus de souplesse, nous pouvons utiliser les classes CSS et jQuery. Tout d'abord, nous ajoutons une classe supplémentaire:

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

Dans controller, nous allons utiliser cette classe par jQuery:

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

Pour masquer l’espace vide lors de la sélection et du regroupement ( http://i.imgur.com/veevhgQ.png ), nous utilisons:

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

Avec 17px, c’est la hauteur de l’espace lorsque nous utilisons les fonctionnalités de sélection et de regroupement.

Démo: http://plnkr.co/edit/D9PKPkvuRy2xA6UNNXCp?p=preview

Avec cette solution, nous pouvons afficher à nouveau facilement la barre horizontale.

4
Envy

Si vous êtes autorisé à utiliser des flexbox:

.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;
          }
        }
      }
    }
  }

Où col-min-width est une largeur min. Que vous définiriez normalement dans gridOptions. Vous devez également définir ui-grid-header padding-right (17px dans cet exemple) sur la largeur de la barre de défilement de votre navigateur avec le javascript sur certains événements: nombre de lignes modifiées, conteneur redimensionné, etc. grille-viewport's offsetWidth - clientWidth. L'utilisation d'une valeur codée en dur pour la largeur de la barre de défilement est incorrecte car différents navigateurs ont des valeurs différentes (et même configurables) pour cela.

0
Dmitry S.