我有一个灵活的盒子。
https://jsbin.com/rikufelosi/1/edit?html,output
行为非常奇怪:至少在Mac下的Chrome或Safari中,加载页面后,handontable的宽度不正确。如果我们向右滚动它,那么我们会看到宽度正确延长。
有谁知道发生了什么?以及如何解决它?
<!DOCTYPE html>
<html>
<head>
<script src="https://handsontable.github.io/ngHandsontable/node_modules/angular/angular.js"></script>
<script src="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<script src="https://handsontable.github.io/ngHandsontable/dist/ngHandsontable.js"></script>
<style>
.rb {
display: flex;
flex-direction: column;
height: 100%;
}
.rb .container {
flex: 1;
display: flex;
padding: 0;
width: 100%;
height: 100%
}
</style>
</head>
<body ng-app="app" ng-controller="Ctrl">
<div class="rb">
<div class="container">
<div style="flex:1; overflow:hidden; height: 100px">
<hot-table settings="settings" on-after-create-row="onAfterCreateRow" datarows="sheetHot"></hot-table>
</div>
<textarea ng-if='(selectedItem !== "userpanel") && (selectedItem !== "panel")' ng-model="text" style="flex:1"></textarea>
<div ng-show='selectedItem === "userpanel"' style="flex: 1"></div>
<div ng-show='selectedItem === "panel"' style="flex: 1"></div>
</div>
</div>
<script>
var app = angular.module('app', ['ngHandsontable']);
app.controller('Ctrl', ['$scope', '$filter', '$timeout', 'hotRegisterer', function ($scope, $filter, $timeout, hotRegisterer) {
$scope.sheetHot = [[5, 6, 7, 8, 9, 19, 11, 12], [5, 6, 7, 8, 9, 19, 11, 12], [5, 6, 7, 8, 9, 19, 11, 12], [5, 6, 7, 8, 9, 19, 11, 12], [5, 6, 7, 8, 9, 19, 11, 12], [5, 6, 7, 8, 9, 19, 11, 12]];
$scope.settings = {
rowHeaders: true,
colHeaders: true,
contextMenu: true,
onAfterCreateRow: function(index, amount) {
console.log("onAfterCreateRow");
$timeout(function() {
$scope.$digest();
});
}
};
}]);
</script>
</body>
</html>
答案 0 :(得分:1)
overflow-y:auto
中有css .ht_clone_left .wtHolder
。所以只需在css中添加以下代码即可将其删除。它会解决你的问题,希望如此......
.wtHolder {
width: 100% !important;
}
.ht_clone_left .wtHolder {
overflow:hidden;
}
为你添加了this jsbin ..请看一下..
答案 1 :(得分:0)
删除overrflow:hidden
<div style="flex:1; height: 100px">
<div class="container">
<div style="flex:1; height: 100px">
<hot-table settings="settings" on-after-create-row="onAfterCreateRow" datarows="sheetHot"></hot-table>
</div>
<textarea ng-if='(selectedItem !== "userpanel") && (selectedItem !== "panel")' ng-model="text" style="flex:1"></textarea>
<div ng-show='selectedItem === "userpanel"' style="flex: 1"></div>
<div ng-show='selectedItem === "panel"' style="flex: 1"></div>
</div>
答案 2 :(得分:0)