SAPUI5 Table Row Height

[#1]

Hello experts,

Has anyone had trouble with table rows being unnecessarily tall on the SAPUI5 table control?  There is a lot of vertical whitespace that I can't seem to get rid of:

I've changed the font size to 11px and resized the button icons, textviews and textfields to 20px, and set the top & bottom padding to 0, but the td size is still computing to a fairly large 36px.  I can manually set the td height to, say 20px, but that crops rows in other tables which may have larger controls such as textAreas.  I need the page to derive the td size based on the size of the child controls, but without all the extra padding.

Here's my CSS related to this:

.sapUiTableCell {
  padding: 0px 5px 0px 5px !important;
}

.sapUiTableTr>td {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}



.sapUiTableCell>.sapUiTv,
.sapUiTableCell>.sapUiTf {
  font-weight: normal;
  font-size: 11px;
  height: 20px;
  padding: 0 5px 0 5px;
}


.sapUiTableCell .sapUiBtn>span.sapUiBtnIco {
  font-size: 14px !important;
  line-height: 12px !important;
  margin-top: 0px !important;
}


.sapUiTableColCell>.sapUiLbl,
.sapUiTableColCell>.sapMLabel {
  font-weight: bold;
  font-size: 11px;
}

Thanks,

Andy

[Qualiture · Accepted solution]

No, but it seems to me the extra height is induced by the images' bottom padding/spacing -- or it's surrounding container(s) --  in your 'Edit' column.

Can you show the code / css for the images cell?

[Former Member · Accepted solution]

You are exactly right.  I had sized down the images, but I guess the matrix layout cell that the buttons were wrapped in had its own padding.

It looks like this is the style that was being applied in library.css:

.sapUiMltPadRight {

  padding: 0 4px 5px 0;

}

If I change that to "0 4px 0 0" to take off the bottom padding I get a much more desirable spacing:

Thanks for your help!