Search code examples
cssscrollflexboxwidthhandsontable

Initial width of handsontable is not well set in a flexbox

I have a handsontable in a flex box.

https://jsbin.com/rikufelosi/1/edit?html,output

The behaviour is very odd: at least in Chrome or Safari under Mac, after loading the page, the width of the handsontable is not correct. If we scroll it to the right, then we see the width is extended correctly.

Does anyone know what's happening? and how to fix it?

<!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>
Solution

  • There is css overflow-y:auto in .ht_clone_left .wtHolder. So just add below code in css to remove it. It will solved your problem hope so..

    .wtHolder {
   width: 100% !important;
}

.ht_clone_left .wtHolder {
   overflow:hidden;
}

    Added this jsbin for you..please look at it..