Table Row Height

Apliqo UX
#1

Hi all,

Has anyone come across a good way to create some extra top/bottom padding on rows in a table? I believe the row height is currently auto-sized but in certain cases, it would be helpful to have a bit more padding above/below (e.g., subtotal line). I tried defining a custom class using “padding-bottom” and it appears to somewhat work on the body of the table but the first column with row dimension elements ends up getting a different padding. Thank you in advance for any suggestions!

image
image
image

#2

Hi Wei,
I just tried this out and there seems to be an issue with the calculation of the correct size when applying the padding. We will look into this. In the meantime you might get the desired result by either using “line-height” (test-row class in code below) or reverting the padding-bottom with an additional class in combination with rowheader (test-row2 class in code below).

.handsontable td.row-test {
  line-height: 50px !important;
}

.handsontable td.row-test2 {
  padding-bottom: 20px;
}
.handsontable td.row-test2.rowheader {
  padding-bottom: 0px;
}

Cheers,
Andreas

#3

Thanks Andreas! Your first suggestion of using “line-height” works great! I had been playing around with trying to use “rowHeights” but “line-height” seems to do the job much better!

#4

Bringing this thread back to life. We are working on a custom P&L like report using a view. The users want it to look like what they have built in excel. So, we are are building out the needed CSS to get it there. I am having a hard time getting the row borders to line up when the excel headings are off.

SCSS:
image

View:
image

Each time I apply that formatting the table shifts 1px, so by the bottom of the report we are off by 3px

However with the Excel headers on the rows line up:
image

I found a quick workaround by hardcoding the height on the rowheader to 47px (1 less than what it was when it was broken, but this seems really hacky)

I tried line-height instead of padding, but it causes problems with ibcs formats and vertical alignment

image
image1049×198 10.5 KB

any ideas on how best to apply the larger row size on a subtotal, without breaking borders and having to hardcode around it?

#5

I am also running into a similar issue when trying to format a table with borders on the rows. It appears that the offset in row height between the “rowheader” and “body” are due to handsontable not accounting for the height (thickness) of the border itself. Been experimenting with line-height and padding and haven’t been able to line up the first column with the remaining ones (when adding a border). In addition, similar to to the observation from @rdclapp, the vertical alignment of text (“vertical-align”) doesn’t seem to work as the text is always center aligned vertically. Has anyone found any alternative ways to (1) format rows with borders and (2) top or bottom align text vertically? Thanks!