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?
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
À 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.
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.