Ang ng ng ui引起網頁水平滾動的網格

我想實現ng ui網格，但是當我嵌入它然後整個頁面變成水平滾動。Ang ng ng ui引起網頁水平滾動的網格

這裏是我的代碼

<!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; 
}

而且還移除電網標籤滾動。

來源

2016-09-19 nand

變化NG UI電網CSS工作對我來說

.grid { 
    width: 99.9%; 
    height: 50vh; 

}

來源

2016-09-20 06:15:21 nand

Ang ng ng ui引起網頁水平滾動的網格

回答

相關問題