0

when I use angular-ui-grid,I found the HorizontalScrollbar always appears. And I try to use enableHorizontalScrollbar:2 in gridOptions. But it doesn't work.and when I show or hide the HorizontalScrollbar like this example.
enter image description here
The left side's selection will be malposition.
any solution?

QI.soa
  • 117
  • 10

1 Answers1

0

This is a size problem, Try to set the width of the column to fit your object size, When you do the horizontal scrollbar will disappear.

Changing the column size to 

   $scope.gridOptions.columnDefs = [
       { name:'id', width:50},
       { name:'name', width:50 },
       { name:'age', width:50 }
     ];

produces a table without horizontal lines

In angular-ui-grid you have an autoResize option,This should solve your problem if the data can actually fit the table.

You can read about it here: http://ui-grid.info/docs/#/tutorial/213_auto_resizing

Yossi Neiman
  • 815
  • 1
  • 7
  • 13
  • doesn't work for me ,I use the `ui-grid-auto-resize` but the HorizontalScrollbar still there – QI.soa Nov 01 '16 at 08:15
  • here is the [plunker](http://plnkr.co/edit/aI6qfDNTMT9RFKkekYoR?p=preview) – QI.soa Nov 02 '16 at 03:09
  • The most basic solution is to add this to your css **.ui-grid- viewport{overflow-x: hidden}** – Yossi Neiman Nov 02 '16 at 11:18
  • 1
    I'm doing it in this way now.It actually can deal with this issue.Only a little problem that the VerticalScrollbar missing,but it's ok .Thanks – QI.soa Nov 03 '16 at 03:21