Ich versuche die horizontale Bildlaufleiste eines angularen UI-Gitters zu verstecken, aber ich kann die richtige Eigenschaft nicht finden. (Eigenschaft enableScrollbars = false entfernt beide.)
Ist es möglich, nur die horizontale Bildlaufleiste zu entfernen?Horizontale Bildlaufleiste ausblenden (Angular ui-grid)
Antwort
Mit der neuesten Version von Github v3.0.0-rc.16 können Sie die horizontale und vertikale Bildlaufleiste separat deaktivieren. Statt
enableScrollbars = false;
Verwendung
enableHorizontalScrollbar = value;
enableVerticalScrollbar = value;
mit
value = 0; /* NEVER */
value = 1; /* ALWAYS */
value = 2; /* WHEN_NEEDED */
UPDATE: Wenn Sie statt der ganzzahligen Wert Konstanten verwenden, schauen entsprechenden Beitrag:
Using ui-grid constants to disable scrollbars
UPDATE: Die Option WHEN_NEEDED zur Zeit nicht verfügbar zu sein scheint. Vielleicht wird dies wieder geändert, also suchen Sie bitte nach den verfügbaren Konstanten im Quellcode.
Die Konstanten in
https://github.com/angular-ui/ui-grid/blob/master/src/js/core/constants.js
Bei jetzt definiert sind, die Option WHEN_NEEDED zur Zeit nicht (ui-Grid 3.1.1) verfügbar zu sein scheint. So habe ich von jQuery und CSS, um gearbeitet:
Für einfache, brauchen wir nur dies tun:
.ui-grid .ui-grid-render-container-body .ui-grid-viewport {
overflow-x: auto !important;
/* or use: overflow-x: hide!important; */
}
Um flexibler zu gestalten, können wir CSS-Klasse und jQuery verwenden. Erstens haben wir eine weitere Klasse hinzu:
.ui-grid-render-container-body .ui-grid-viewport.no-horizontal-bar {
overflow-x: hidden !important;
}
Im Controller werden wir diese Klasse von jQuery verwenden:
$timeout(function(){
if (!!$scope.gridOptions.data) {
$('.ui-grid-render-container-body .ui-grid-viewport').addClass("no-horizontal-bar");
}
});
Um die leere Lücke zu verbergen, wenn die Verwendung der Auswahl und Gruppierung (http://i.imgur.com/veevhgQ.png), die wir verwenden:
$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");
}
});
Mit 17px ist Höhe der Lücke, wenn wir Auswahl und Gruppierung verwenden.
Demo: http://plnkr.co/edit/D9PKPkvuRy2xA6UNNXCp?p=preview
Mit dieser Lösung kann man wieder die horizontalen Balken zeigen kann leicht.
Wenn Sie erlaubt flexboxes verwenden:
.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;
}
}
}
}
}
Wo col-min-width ist ein minWidth, die man normalerweise in den gridOptions gesetzt würde.Außerdem müssen Sie das Padding-Recht des ui-grid-headers (in diesem Beispiel 17px) auf die Breite der Bildlaufleiste Ihres Browsers mit dem Javascript bei bestimmten Ereignissen einstellen: Anzahl der Zeilen geändert, Größe des Containers ändern usw. Scrollbar width = ui- grid-viewport's OffsetWidth - clientWidth. Die Verwendung eines hardcodierten Wertes für die Scrollbar-Breite ist schlecht, da verschiedene Browser unterschiedliche (und sogar konfigurierbare) Werte dafür haben.
- 1. Entfernen iframe horizontale Bildlaufleiste
- 2. Force horizontale Tabelle Bildlaufleiste
- 3. horizontale Bildlaufleiste im Bootstrap
- 4. Horizontale Bildlaufleiste in IE6
- 5. Slickgrid horizontale Bildlaufleiste deaktivieren
- 6. Horizontale Bildlaufleiste funktioniert nicht
- 7. Angular JS uigrid immer Reihe ids ausgewählt
- 8. Horizontale Bildlaufleiste in Opera (11.0)
- 9. Horizontale Bildlaufleiste - WP Thesis - WARUM?
- 10. HTML-Divs, Spalten, horizontale Bildlaufleiste
- 11. Horizontale Bildlaufleiste in WinForms DataGridView
- 12. Vertikale Bildlaufleiste im ListBox Steuerelement ausblenden
- 13. IE: vertikale Bildlaufleiste erscheint, wenn die horizontale Bildlaufleiste gezeigt wird
- 14. Listbox horizontale Bildlaufleiste nicht ordnungsgemäß aktualisiert
- 15. So erstellen Sie eine horizontale Bildlaufleiste Diashow
- 16. So entfernen Sie die horizontale Bildlaufleiste?
- 17. WPF Horizontale Bildlaufleiste ist nicht sichtbar
- 18. Automatisch angepasste horizontale Bildlaufleiste/Schieberegler anpassen?
- 19. Keine horizontale Bildlaufleiste im Brennofen Code Bewertungen
- 20. So entfernen Sie eine horizontale Bildlaufleiste
- 21. Horizontale Bildlaufleiste zu Ionic2s Ionen-Objektträgern hinzufügen
- 22. horizontale Bildlaufleiste zum vertikalen Bildlauf hinzufügen uicollectionView
- 23. Probleme mit Datatables und unerwünschte horizontale Bildlaufleiste
- 24. C# WinForms TreeView entfernen Horizontale Bildlaufleiste
- 25. Flexslider 100% Breite erstellt horizontale Bildlaufleiste
- 26. CSS - benutze nur eine horizontale Bildlaufleiste
- 27. Padding lässt die horizontale Bildlaufleiste erscheinen
- 28. Ausblenden/Anzeigen der Kendo-Raster-Bildlaufleiste
- 29. Bildlaufleiste mit Überlauf ausblenden: Bildlauf aktiviert
- 30. Angular datatables Spalte ausblenden
Hallo @nabinca Es ist eine sehr alte Geschichte, aber der Wert 2 'WHEN_NEEDED' scheint nicht in UI-Grid-Konstanten verfügbar zu sein oder fehle ich es? – BiJ
Ja, Sie haben Recht. WHEN_NEEDED ist momentan nicht verfügbar. Es gibt immer ein paar Probleme mit Bildlaufleisten - aktualisiert meine Antwort! – nabinca
Ich hatte ein Problem, bei dem die Spalten nicht die richtige Breite überstrichen (so dass Platz für den vertikalen Bildlauf blieb). Ich habe ng-if benutzt, um das Gitter beim Laden der Seite auszublenden und es dann anzuzeigen, nachdem das Gitter initialisiert wurde. Ich sah etwas verwenden $ scope.gridApi.core.handleWindowResize(); innerhalb eines Timeouts, um dieses Problem zu beheben. –