CODEWITHSUNDEEP
cssscrollflexboxwidthhandsontable
SoftTimur
SoftTimur

Reputation: 5510

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>

Upvotes: 0

Views: 1880

Answers (3)

Sagar Kodte
Sagar Kodte

Reputation: 3815

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..

Upvotes: 3

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

Why not overwrite the styles of the handsontable in your CSS using !important? Like:

.wtHolder {
  width: 100% !important;
}

Have a look at this JSBin.

Hope this helps!

Upvotes: 0

i3lai3la
i3lai3la

Reputation: 980

Remove your overrflow:hidden in <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>

Upvotes: 0

Related Questions