UI Grid header占据了整个页面

所以，我一直在头部撞墙上的问题，其中angular-ui-grid的标题占据了屏幕的整个高度。UI Grid header占据了整个页面

我已经将问题简化为一个文件中的一个文件。 http://plnkr.co/edit/XR7OVXjwSodqTNRBAVnv?p=preview

<html> 
<head> 
    <title>Broken ui-grid</title> 

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="///ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> 

    <script> 
     var app = angular.module('sample', ['ui.grid']); 
    </script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.7/ui-grid.min.js"></script> 

    <script> 
     angular.module('sample').controller('SampleController', ['$scope', '$timeout', function($scope, $timeout) { 
      $scope.uiGridOptions = { 
       rowHeight: 36, 

       data: [ 
        { date: Date.now()/1000, blah1: "Test data"} 
       ] 
      }; 

      $scope.uiGridOptions.columnDefs = [ 
       { field: "blah1", displayName: "blah", width: 150 } 
      ]; 
     }]); 
    </script> 

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.7/ui-grid.min.css"/> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body ng-app="sample" ng-controller="SampleController"> 
    <div id="dailyGrid" ui-grid="uiGridOptions"></div> 
</body> 
</html>

谁能告诉我什么，我做错了什么？

来源

2017-10-12 kfreezen

因此，经过大约一个小时的搜索和摆弄，我发现了这个问题。

我所需要解决的问题是在文档中添加<!DOCTYPE html>，并繁荣！问题解决了！

<!DOCTYPE html> 
<html> 
... code snip ...

Plunkr与修复：http://plnkr.co/edit/6rRIcjaL1yPF6GKRTkUT?p=preview

我怀疑浏览器（谷歌浏览器）在一些非HTML5模式被渲染，而不DOCTYPE。我没有意识到doctype和doctype之间会有区别。

希望这对其他人也有用。

来源

2017-10-12 18:06:52 kfreezen

UI Grid header占据了整个页面

回答

相关问题