Comment faire pour Activer la barre de défilement horizontale dans l'interface utilisateur-réseau angularjs

Je suis en utilisant angularjs de l'interface utilisateur-réseau, mais je n'obtiens pas de barre de défilement horizontale sur ma grille et tous les en-têtes de colonne sont de se mêler comme il n'y a pas de barre de défilement dans la grille.
Comment puis-je activer la barre de défilement horizontale?

InformationsquelleAutor Shubhankar Bapat | 2015-12-15
  1. 1

    Si vous voulez toujours afficher la barre de défilement horizontale, dans votre barre de défilement options enableHorizontalScrollbar à uiGridConstants.scrollbars.ALWAYS, si vous souhaitez afficher uniquement lorsque vous en avez besoin, il uiGridConstants.scrollbars.WHEN_NEEDED.

    JS:

    var app = angular.module('app', ['ngTouch', 'ui.grid'])

  .controller('MainCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {

    $scope.yourGridOptions = {
      enableHorizontalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED, //Here!
      enableVerticalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED,
      columnDefs: [{
        name: 'col1',
        width:150
      }, {
        name: 'col2',
        width:150
      }, {
        name: 'col3',
        width:150
      }, {
        name: 'col4',
        width:150
      }],
      data: [{
        "col1": "aa",
        "col2": "bb",
        "col3": "cc",
        "col4": "dd"
      }, {
        "col1": "aa",
        "col2": "bb",
        "col3": "cc",
        "col4": "dd"
      }, {
        "col1": "aa",
        "col2": "bb",
        "col3": "cc",
        "col4": "dd"
      }]
    };
  }]);

    CSS:

    .grid {
  width: 200px;
  height: 250px;
}

    HTML:

    <!doctype html>
<html ng-app="app">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-touch.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-animate.js"></script>
        <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
        <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
        <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
        <script src="http://ui-grid.info/release/ui-grid.js"></script>
        <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
        <link rel="stylesheet" href="main.css" type="text/css">
    </head>
    <body>

      <div ng-controller="MainCtrl">
        <div id="grid1" ui-grid="yourGridOptions" class="grid"></div>
      </div>


    </body>
</html>

    • WHEN_NEEDED n'est pas disponible dans l'interface utilisateur-réseau - v3.0.7
    InformationsquelleAutor KorelK
  2. 0

    Ensemble enableHorizontalScrollbar: 0

    pour plus d'informations, veuillez aller à travers le lien ci-dessous.

    https://github.com/angular-ui/ui-grid/issues/2734

    InformationsquelleAutor Shakeer Hussain