0
私はグリッドを実装しようとしていますが、それを埋め込むときにページ全体が水平スクロール可能になります。ここでウェブページの水平スクロールを引き起こす角度グリッドグリッド
は、ここに私のコード
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head >
<title>ISS Core</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--angular grids based ependency -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/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">
<style>
.grid {
width: 100%;
height: 50vh;
}
/* angular grip based dependency */
/*$scope.getTableHeight = function() {
var rowHeight = 30; // your row height
var headerHeight = 30; // your header height
return {
height: ($scope.gridData.data.length * rowHeight + headerHeight) + "px"
};
};
$scope.$watchCollection('tableData', function (newValue, oldValue) {
angular.element(element[0].querySelector('.grid')).css($scope.getTableHeight());
});
*/ </style>
<script type="text/javascript">
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.exporter', 'ui.grid.selection']);
app.controller('MainCtrl', ['$scope', '$http', '$interval', '$q', function ($scope, $http, $interval, $q) {
var fakeI18n = function(title){
var deferred = $q.defer();
$interval(function() {
deferred.resolve('col: ' + title);
}, 1000, 1);
return deferred.promise;
};
$scope.gridOptions = {
multiSelect : false,
exporterMenuPdf : false,
enableHiding : false,
enableColumnMenus : false,
enableHiding : false,
enableGridMenu : false,
gridMenuTitleFilter: fakeI18n,
columnDefs: [
{ name: 'name' },
{ name: 'gender', enableHiding: false },
{ name: 'company' }
],
gridMenuCustomItems: [
{
title: 'Rotate Grid',
action: function ($event) {
this.grid.element.toggleClass('rotated');
},
order: 210
}
],
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
// interval of zero just to allow the directive to have initialized
$interval(function() {
gridApi.core.addToGridMenu(gridApi.grid, [{ title: 'Dynamic item', order: 100}]);
}, 0, 1);
gridApi.core.on.columnVisibilityChanged($scope, function(changedColumn){
$scope.columnChanged = { name: changedColumn.colDef.name, visible: changedColumn.colDef.visible };
});
}
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);
</script>
</head>
<body>
<div class="container-fluid" >
<div class="row" id="grid" ng-controller="MainCtrl"> <h3 style="background-color: #0a4e8f;color:white;">Arrival Flight List</h3>
<div id="grid1" ui-grid="gridOptions" ui-grid-exporter ui-grid-selection class="grid"></div>
<div ng-if='columnChanged'>
Column Visibility Changed - name: {{ columnChanged.name }} visible: {{ columnChanged.visible }}
</div>
</div>
<br>
</div>
</body>
</html>
あり、この水平方向のスクロールを削除することができますどのようにスナップショット 
はありますか？ 私は
body{
overflow-x: hidden;
}
と試みたが、それはまた、グリッド・ラベルからスクロールを削除します。 NGのUIグリッドCSSで