2014-09-24 9 views

Antwort

56

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

+3

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

+0

Ja, Sie haben Recht. WHEN_NEEDED ist momentan nicht verfügbar. Es gibt immer ein paar Probleme mit Bildlaufleisten - aktualisiert meine Antwort! – nabinca

+1

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. –

4

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.

0

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.

Verwandte Themen