Skip to Content
avatar image
Soham Shah

How to resize a table row height in UI5

Feb 20, 2017 at 07:41 AM | 1.1k Views

Hello,

It seems that table row height of UI5 Table is pretty big with lot of white space above and below the text.

Is there anyway I can resize the height of the row with lesser px? I want to apply this seeting only for this table and not all tables.

When I look at its CSS in Chrome Developer tools, I get following:

element.style{height: 49px} is the culprit. How can I make it like 30 px and can apply only to this table?

Thanks !

table-height.jpg (40.3 kB)
table-css.jpg (77.1 kB)
SAPUI5
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Best Answer
    avatar image
    Former Member
    Feb 20, 2017 at 08:29 AM

    You can set row height in UI5 table.

    https://sapui5.hana.ondemand.com/#docs/api/symbols/sap.ui.table.Table.html#setRowHeight

    BTW, you might be interested in different density modes in UI5.

    https://help.sap.com/saphelp_nw75/helpdata/en/e5/4f729da8e3405fae5e4fe8ae7784c1/content.htm

    Content Densities @ control level : https://openui5.hana.ondemand.com/#docs/guide/13e6f3bfc54c4bd7952403e20ff447e7.html

    Try setting class to your table: class="sapUiSizeCompact"

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Akhilesh Upadhyay
    Feb 20, 2017 at 11:23 AM

    For particular table css:

    table[id*='tableID'] tr { } //tr css for table id tableID

    table[id*='tableID'] td { } //td css for table id tableID

    table[id*='tableID'] td span { } //span(text) of td css for table id tableID

    hope this help.

    Thanks,

    Akhilesh

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Soham Shah
    Feb 28, 2017 at 05:31 AM

    I used RowHeight property of sap.ui.table !

    Add comment
    10|10000 characters needed characters exceeded