Handsontable firstrow fehlausgerichtet

Question

Ich benutze die neueste Version 0.24.3 aber steckte immer noch in diesem Problem fest. Jedes Mal, wenn die Tabelle gerendert wird, ist die erste Zeile immer falsch ausgerichtet und wird unter der Kopfzeile ausgeblendet.

Hier ist mein Code so weit.

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

Das ist alles jedes Mal passieren die Tabelle machen.

Answer 1

Es funktioniert jetzt, nach dem Debuggen und Nachverfolgen der CSS habe ich endlich den Schuldigen gefunden. Ich weiß nicht, ob es der beste Weg ist, aber ich hoffe, dass diejenigen, die auf dasselbe Problem gestoßen sind, dies anwenden können. Öffne die CSS-Datei von handontable und bearbeite diesen Teil und füge die maximale Höhe hinzu.

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

Und das ist es!