Masquer la barre de défilement horizontale (Angulaire de l'interface utilisateur-réseau)

Je suis en train de cacher la barre de défilement horizontale d'un Angulaire de l'interface utilisateur-réseau, mais je ne peux pas trouver le droit de propriété. (Propriété enableScrollbars=false supprime à la fois.)

Est-il possible de ne supprimer que la barre de défilement horizontale?

InformationsquelleAutor Andreas N. | 2014-09-24

angular-ui-grid

58

Avec la dernière version sur Github v3.0.0-rc.16 vous pouvez désactiver horizontale et verticale de la barre de Défilement séparément.
Au lieu de
```
enableScrollbars = false;
```
utilisation
```
enableHorizontalScrollbar = value; 
enableVerticalScrollbar = value;
```
avec
```
value = 0; /* NEVER */
value = 1; /* ALWAYS */
value = 2; /* WHEN_NEEDED */
```
Mise à JOUR:
Si vous voulez utiliser les constantes à la place de l'entier de la valeur, de la regarder de poste correspondant:

À l'aide de l'interface utilisateur-réseau des constantes de désactiver les barres de défilement

Mise à JOUR:
L'option WHEN_NEEDED ne semble pas être disponible pour le moment.
Peut-être que ce sera de nouveau changé, de sorte s'il vous plaît regardez pour 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
- Salut @nabinca c'est une très vieille histoire, mais la valeur 2 'WHEN_NEEDED' ne semble pas être disponible dans l'interface utilisateur-réseau des constantes ou alors j'ai loupé ça?
- Oui, vous avez raison. WHEN_NEEDED n'est pas disponible (pour le moment). Il y a toujours quelques questions concernant les barres de défilement - mise à jour de ma réponse!
- J'ai eu un problème où les colonnes couvrent pas la bonne largeur (en laissant de l'espace pour le défilement vertical). J'ai utilisé ng-si pour masquer la grille sur la page de la charge puis de le montrer après la grille a été initialisé. J'ai vu quelques utiliser $champ d'application.gridApi.de base.handleWindowResize(); à l'intérieur d'un délai d'attente au lieu de résoudre ce problème.
InformationsquelleAutor nabinca
4

À maintenant, l'option WHEN_NEEDED ne semble pas être disponible pour l'instant (de l'interface utilisateur-réseau 3.1.1). J'ai donc travaillé autour de par jQuery et CSS:

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; */
}
```
Plus de flexibilité, nous pouvons utiliser la classe CSS et jQuery. Tout d'abord, nous ajoutons une classe plus:
```
.ui-grid-render-container-body .ui-grid-viewport.no-horizontal-bar {
    overflow-x: hidden !important;
}
```
Contrôleur, 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 le vide de l'écart lors de l'utilisation de la sélection et de 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 est la hauteur de l'écart lorsque nous utilisons la sélection et la fonctionnalité de regroupement.

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

Avec cette solution, nous pouvons montrer la barre horizontale de nouveau facilement.

InformationsquelleAutor Envy

Si vous êtes autorisé à utiliser 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;
          }
        }
      }
    }
  }

Où le col-min-width est un minWidth que vous le feriez normalement dans le gridOptions. Aussi, vous devez définir l'interface utilisateur-réseau-d'en-tête de l'padding-right (qui est 17px dans cet exemple) à la largeur de votre navigateur barre de défilement avec le javascript sur certains événements: nombre de lignes modifiées, conteneur redimensionnée etc. Barre de défilement largeur = ui-grille-fenêtre d'affichage du offsetWidth - clientWidth. À l'aide d'une valeur codée en dur pour la largeur de la barre de défilement est mauvais, parce que les différents navigateurs ont différents (et même configurable) des valeurs pour que.

InformationsquelleAutor Dmitry S.

Vous devez vous connecter pour publier un commentaire.