Handsontable - Change row height

Question

I want to change the height of the rows in mi handsontable. I already change the widht of the columns (colWidths: [75,75,75]), but i cant find the way to do the same with rows.

Thanks!

Answer 1

The problem with that Chachi-inactive is the height gets dynamically set on one of the holder divs

<div class="wtHolder ht_master" style="position: relative; height: 27px;">

You can find and edit the below code in the main handsontable.js

columnWidth: 50,
rowHeight: function (row) {
  return 50;
},
defaultRowHeight: 50,
selections: null,
hideBorderOnMouseDownOver: false,

This needs to be updated if you have elements below the handsontable table.

Answer 2

you can use this. but remember you must mark the "white-space:nowrap " as !important to override the handsontable property

.handsontable td, .handsontable tr, .handsontable th
{
    max-width: 20px;
       min-width: 10px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap !important;

}

Answer 3

I had the same issue, and you need to modify in one place, the css file, or you can overwrite the style in your html:

in the handsontable css file search for the style .handsontable td :

.handsontable td {
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  height: 22px; /*change to the desired height value*/
  empty-cells: show;
  line-height: 21px;
  padding: 0 4px 0 4px;
  /* top, bottom padding different than 0 is handled poorly by FF with HTML5 doctype */
  background-color: #FFF;
  vertical-align: top;
  overflow: hidden;
  outline-width: 0;
  white-space: pre-line;
  /* preserve new line character in cell */
}

Just change the "height" value to the one you want inside the css, or you just add the following line in the style section of your html document:

.handsontable td {  height: <desired height>px;}

Additionally I would make the changes mentioned by RustyBadRobot in file jquery.handsontable.js, this could be used in some other calculation, but so far the change in css seems to be enough.

Please note that this is working with handsontable version 0.11.3, not sure if this is also true for other versions.

Answer 4

I don't know of any parameter similar to colWidths that you can use to specify individual row heights, but you can use CSS to specify a height for all td and th elements.

For example:

.handsontable th,
.handsontable td {
    line-height: 50px;
}