4

I am using angularjs ui-grid but i am not getting horizontal scrollbar on my grid and all the column headers are getting mixed as there is no scrollbar in the grid. How can i enable horizontal scrollbar?

Daniel A. White
  • 187,200
  • 47
  • 362
  • 445
Shubhankar Bapat
  • 81
  • 1
  • 1
  • 8
  • http://ui-grid.info/docs/#/tutorial/191_horizontal_scrolling – Daniel Dec 15 '15 at 10:25
  • Refer the following link [In Stack OverFlow](http://stackoverflow.com/questions/26015500/hide-horizontal-scrollbar-angular-ui-grid) – Ivan Dec 02 '16 at 04:35

2 Answers2

1

If you want always display horizontal scrollbar, in your scrollbar options set enableHorizontalScrollbar to uiGridConstants.scrollbars.ALWAYS, if you want to display it only when you need it, set it to uiGridConstants.scrollbars.WHEN_NEEDED.

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"
      }]
    };
  }]);
.grid {
  width: 200px;
  height: 250px;
}
<!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>
Coral Kashri
  • 3,436
  • 2
  • 10
  • 22
0

Set enableHorizontalScrollbar: 0

for more information please go through below link.

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

Shakeer Hussain
  • 2,230
  • 7
  • 29
  • 52