智能表angularjs模块固定的表头是不工作的Safari浏览器 [英] smart table angularjs module fixed table header is not working on safari
问题描述
我使用智能表角的js基础模块。我实现了这个模块在我的项目，并意识到它不是在Safari正确呈现。然后，我通过智能表现场给出的例子中去，实现给定的也有有问题的萨法尔该样品的例子。以下是plunker有固定的表头code样品。
I am using smart table angular js based module. I implemented this module in my project and realized its not rendering properly on safari. Then I went through the example given on smart table site and realized that sample example given there is also having problem on safar. Following is plunker having fixed table header code sample.
http://plnkr.co/edit/fcdXKE?p=preview
HTML标记
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js@1.2.25" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src=smart-table.debug.js></script>
</head>
<body ng-controller="mainCtrl">
<table st-table="displayed" class="table table-striped">
<thead>
<tr>
<th st-ratio="20" st-sort="firstName">first name</th>
<th st-ratio="20" st-sort="lastName">last name</th>
<th st-ratio="10" st-sort="age">age</th>
<th st-ratio="30" st-sort="email">email</th>
<th st-ratio="20" st-sort="balance">balance</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayed">
<td st-ratio="20">{{row.firstName}}</td>
<td st-ratio="20">{{row.lastName | uppercase}}</td>
<td st-ratio="10">{{row.age}}</td>
<td st-ratio="30">{{row.email}}</td>
<td st-ratio="20">{{row.balance | currency}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-items-by-page="20" st-pagination=""></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
的script.js
script.js
angular.module('myApp', ['smart-table'])
.controller('mainCtrl', ['$scope', function ($scope) {
var
nameList = ['Pierre', 'Pol', 'Jacques', 'Robert', 'Elisa'],
familyName = ['Dupont', 'Germain', 'Delcourt', 'bjip', 'Menez'];
function createRandomItem() {
var
firstName = nameList[Math.floor(Math.random() * 4)],
lastName = familyName[Math.floor(Math.random() * 4)],
age = Math.floor(Math.random() * 100),
email = firstName + lastName + '@whatever.com',
balance = Math.random() * 3000;
return{
firstName: firstName,
lastName: lastName,
age: age,
email: email,
balance: balance
};
}
$scope.displayed = [];
for (var j = 0; j < 50; j++) {
$scope.displayed.push(createRandomItem());
}
}])
.directive('stRatio',function(){
return {
link:function(scope, element, attr){
var ratio=+(attr.stRatio);
element.css('width',ratio+'%');
}
};
});
的style.css
style.css
table {
box-sizing: border-box;
-moz-box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: stretch;
height: 500px; /* this can vary */
}
table * {
box-sizing: inherit;
-moz-box-sizing: inherit;
}
thead {
display: flex;
flex-direction: column;
align-items: stretch;
}
tbody {
overflow-y: scroll;
display: inline-block;
}
thead > tr, tbody > tr, tfoot > tr {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
thead, tfoot {
flex-shrink: 0;
}
th, tbody td {
width: 20%; /* this can vary */
overflow-x: hidden;
text-overflow: ellipsis;
display: inline-block;
}
tfoot {
display: inline-block;
}
tfoot td {
width: 100%;
display: inline-block;
}
您将看到，野生动物园，表头是不固定的页面滚动;然而，相同的作品在其他浏览器的罚款。
请帮助。
You will see that on safari, the table header is not fixed on page scroll; however same works fine on other browser. Please help.
推荐答案
今早我收到完全相同的问题。就像你我用这个例子code从智能表的网页。
I had the exact same problem this morning. Like you I was using the example code from smart table webpage.
的问题是，在CSS挠曲性质不同的Safari兼容。为了更好的跨浏览器的兼容性：
The problem is that the flex properties in the css are not compatible with Safari. For a better cross-browser compatibility:
将这个而不是显示：FLEX（它必须以这个顺序）：
Put this instead of display:flex (it must be in this order):
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
将这个代替柔性方向：行（与列相同）：
Put this instead of flex-direction:row (the same with column) :
-moz-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
将这个代替柔性包装的：NOWRAP：
Put this instead of flex-wrap:nowrap :
-moz-flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
最后这个代替的弹性收缩：0：
And finally this instead of flex-shrink:0 :
-moz-flex-shrink: 0;
-webkit-flex-shrink: 0;
flex-shrink: 0;
我可以测试它在Safari 8，但它应该在Safari 6+工作（我会很感激，如果有人可以证实这一点）。
I could test it in Safari 8 but it should work in Safari 6+ (I'd be grateful if somebody could confirm this).
有关Flexbox的详细信息，我建议你的完整指南Flexbox的。对于跨浏览器的兼容性去这里。
For more information about flexbox I recommend you A complete guide to flexbox. For cross-browser compatibility go here.
这篇关于智能表angularjs模块固定的表头是不工作的Safari浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
