मेरे पास एक फ्लेक्स बॉक्स में एक हैंडसनटेबल है।

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

व्यवहार बहुत अजीब है: कम से कम क्रोम या मैक के तहत सफारी में, पृष्ठ लोड करने के बाद, हैंडसोंटेबल की चौड़ाई सही नहीं है। यदि हम इसे दाईं ओर स्क्रॉल करते हैं, तो हम देखते हैं कि चौड़ाई सही ढंग से बढ़ाई गई है।

क्या किसी को पता है कि क्या हो रहा है? और इसे कैसे ठीक करें?

<!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
SoftTimur 27 अक्टूबर 2017, 10:09

3 जवाब

सबसे बढ़िया उत्तर

.ht_clone_left .wtHolder में css overflow-y:auto है। तो इसे हटाने के लिए बस नीचे दिए गए कोड को css में जोड़ें। यह आपकी समस्या का समाधान करेगा आशा है ..

  .wtHolder {
width: 100% !important;
   }

.ht_clone_left .wtHolder {
  overflow:hidden;
  }

आपके लिए यह jsbin जोड़ा गया..कृपया इसे देखें..

1
Sagar Kodte 30 अक्टूबर 2017, 16:38

अपने 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>
0
i3lai3la 27 अक्टूबर 2017, 10:14

क्यों न !important का उपयोग करके अपने CSS में हैंडोंटेबल की शैलियों को अधिलेखित कर दिया जाए? पसंद:

.wtHolder {
  width: 100% !important;
}

इस पर एक नज़र डालें JSBin

उम्मीद है ये मदद करेगा!

0
Saurav Rastogi 30 अक्टूबर 2017, 13:32