Remove the bottom margin of a handsontable

2019-03-07 00:32发布

I am using Chrome Version 61.0.3163.100 (Official Build) (64-bit) or Safari Version 11.0 (12604.1.38.1.7) under Mac OS Sierra 10.12.6.

I want to create a handsontable, whose height may exceeds the height of the screen:

https://jsbin.com/bobevafana/edit?html,output

I realize that there is always a bottom margin below the table, does anyone know how to remove it?

var app = angular.module('app', ['ngHandsontable']);
app.controller('Ctrl', ['$scope', '$filter', '$timeout', 'hotRegisterer', function($scope, $filter, $timeout, hotRegisterer) {
  $scope.dataJson = [
    [5], [7], [5], [7], [5], [7], [5], [7], [5],
    [7], [5], [7], [5], [7], [5], [7], [5], [7],
    [5], [7], [5], [7], [5], [7], [5], [7], [5],
    [7], [5], [7], [5], [7], [5], [7], [5], [7],
    [5], [7], [5], [7], [5], [7], [5], [7], [5],
    [7], [5], [7], [5], [7], [5], [7]
  ];

  $scope.settings = {
    contextMenu: true,
    onAfterCreateRow: function(index, amount) {
      console.log("onAfterCreateRow");

      $timeout(function() {
        $scope.$digest();
      });

    }
  };
}]);
<!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>
</head>

<body ng-app="app">
  <div ng-controller="Ctrl">
    <hot-table settings="settings" datarows="dataJson"></hot-table>
  </div>

</body>

</html>

enter image description here

1条回答
趁早两清
2楼-- · 2019-03-07 00:48

What I saw in that demo of yours is; the default browser style (margin) added to the body, and not the table.

Setting the margin CSS property for the body can be helpful. Check it out yourself below in the snippet, or here: https://jsbin.com/qejekiqigo/1/edit?html,output

var app = angular.module('app', ['ngHandsontable']);
app.controller('Ctrl', ['$scope', '$filter', '$timeout', 'hotRegisterer', function($scope, $filter, $timeout, hotRegisterer) {
  $scope.dataJson = [
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7]
  ];

  $scope.settings = {
    contextMenu: true,
    onAfterCreateRow: function(index, amount) {
      console.log("onAfterCreateRow");

      $timeout(function() {
        $scope.$digest();
      });

    }
  };
}]);
<!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>body { margin-bottom: 0; /* OR margin: 0; */ }</style>
</head>

<body ng-app="app">
  <div ng-controller="Ctrl">
    <hot-table settings="settings" datarows="dataJson"></hot-table>
  </div>

</body>

</html>

查看更多
登录 后发表回答