Handsontable firstrow misaligned

Question

私は最新のバージョン0.24.3を使用していますが、まだこの問題に悩まされています。表がレンダリングされるたびに、最初の行は常に不揃いでヘッダーの下に隠れます。ここで

は、これまでの私のコードです。

$scope.populateTable = function(data){ 
 
     var container = document.getElementById('priceSettingContent'); 
 
     $scope.hotPricing = new Handsontable(container, { 
 
      data: data , 
 
      rowHeaders: false, 
 
      colHeaders: ['Article Number','Color','Size','EAN', 'Local Distribution Channel','Published Selling Price', 
 
        'Suggested Retail Price','Purchase Cost','Currency','Last Update'], 
 
      columnSorting: false, 
 
      contextMenu: false, 
 
      columns: [ 
 
        { 
 
         data: 'articleNumber', 
 
         readOnly: true, 
 
         disableVisualSelection: true 
 
        }, 
 
        { 
 
         data: 'colorCode', 
 
         readOnly: true, 
 
         disableVisualSelection: true 
 
        }, 
 
        { 
 
         data: 'size', 
 
         readOnly: true, 
 
         disableVisualSelection: true 
 
        }, 
 
        { 
 
         data: 'ean',readOnly: 
 
         true, disableVisualSelection: true 
 
        }, 
 
        { 
 
         data: 'distList', 
 
         readOnly: true, 
 
         disableVisualSelection: true 
 
        }, 
 
        { 
 
         data: 'publishedSellingPrice', 
 
         type: 'numeric', 
 
         format: '0,0.00', 
 
         language: 'en', 
 
         validator: $scope.currencyValidator, 
 
         allowInvalid: false, 
 
        }, 
 
        { 
 
         data: 'suggestedRetailPrice', 
 
         type: 'numeric', 
 
         format: '0,0.00', 
 
         language: 'en', 
 
         validator: $scope.currencyValidator, 
 
         allowInvalid: false 
 
        }, 
 
        { 
 
         data: 'purchaseCost', 
 
         type: 'numeric', 
 
         format: '0,0.00', 
 
         language: 'en', 
 
         validator: $scope.currencyValidator, 
 
         allowInvalid: false 
 
        }, 
 
        { 
 
         data: 'currencyCode', 
 
         readOnly: true, 
 
         disableVisualSelection: true 
 
        }, 
 
        { 
 
         data: 'dateModified', 
 
         readOnly: true, 
 
         disableVisualSelection: true 
 
        }, 
 
     ] 
 
      renderAllRows: true, 
 
      height: function(){ 
 
       return 400; 
 
      }, 
 
      stretchH: 'all', 
 
      afterChange: function(change, source){ \t 
 
       if(source != 'loadData'){ 
 
        $scope.extractData(change); 
 
       } 
 
      }, 
 
      afterCreateRow: function(index, amount){ 
 
       data.splice(index, amount) 
 
      }, 
 
      tableClassName: ['table-hover', 'table-striped','table-responsive'], 
 
      manualColumnResize: true, 
 
      cells: function(row, col, prop) { 
 
       var cellProperties = {}; 
 
       if (row === 0, col === 0) { 
 
        cellProperties.renderer = $scope.articleNameRenderer; 
 
       } 
 
       return cellProperties; 
 
      } 
 
     }); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

これは、すべてのテーブルには、レンダリングするたびに起きるれます。

Answer 1

私は最終的に犯人を見つけた、CSSでデバッグとトレースを行った後で動作しています。私はそれが最善の方法であるかどうかわからないが、同じ問題に遭遇した人々にこれを適用できることを願っている。 handontableのcssファイルを開き、この部分を編集してmax-heightを追加します。

.ht_clone_top .wtHolder, 
 
.ht_clone_bottom .wtHolder { 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 
    max-height: 35px; /* add max height */ 
 
}

そして、それはそれです！