sap.ui.table.Table: rows and scrollbar are misaligned

Question

I am not able to scroll down till last row. I have to use ↓ key to reach it.

Heights are variable for each row. Each row can show maximum 3 line of text.

<t:Table id="phraseTable"
  class="phraseTable"
  columnHeaderHeight="21"
  enableColumnReordering="false"
  selectionMode="Single"
  cellClick="onCellClick"
  visibleRowCountMode="Auto"
  selectionBehavior="RowOnly"
  rows="{dataModel>/phraseTable}"
>
  <t:columns>
    <t:Column hAlign="Center" resizable="true">
      <Label text="No." wrapping="true" />
      <t:template>
        <Text class="PhrasesText"
          wrapping="true"
          textAlign="End"
          text="{dataModel>Phrase_id}"
        />
      </t:template>
    </t:Column>
    <t:Column hAlign="Center" resizable="true">
      <Label text="Phrases" />
      <t:template>
        <FormattedText id="test"
          class="maxlines PhrasesText"
          htmlText="{dataModel>Phrase_desc}"
        />
      </t:template>
    </t:Column>
    <t:Column hAlign="Center" resizable="true">
      <Label class="headerClass commonSorting" text="Status" />
      <t:template>
        <Text class="PhrasesText"
          wrapping="true"
          text="{dataModel>Status_desc}"
        />
      </t:template>
    </t:Column>
    <t:Column hAlign="Center" resizable="false">
      <Label class="headerClass commonSorting" text="Geography" />
      <t:template>
        <Text class="Phrases"
          wrapping="false"
          text="{dataModel>Geography_desc}"
        />
      </t:template>
    </t:Column>
    <t:Column hAlign="Center" resizable="false">
      <Label class="headerClass commonSorting" text="Regulatory class" />
      <t:template>
        <Text class="Phrases"
          wrapping="false"
          text="{dataModel>Regulatory_desc}"
        />
      </t:template>
    </t:Column>
    <t:Column hAlign="Center" resizable="false">
      <Label class="headerClass commonSorting" text="Author" />
      <t:template>
        <Text class="PhrasesText"
          wrapping="false"
          text="{dataModel>Author_desc}"
        />
      </t:template>
    </t:Column>
  </t:columns>
</t:Table>

CSS Used

.maxlines {
  display: inline-block; /* or inline-block */
  text-overflow: ellipsis;
  word-wrap: break-word !important;
  overflow: hidden !important;
  max-height: 62.5px !important;
  line-height: 16px !important;
  text-align: left !important;
}

Answer 1

Tables from the sap.ui.table library support only a limited set of controls.
Additionally, text wrapping should be disabled.

1. Remove custom CSS rules that might be manipulating cell heights.

2. Cell content: make sure to use only controls from the supported controls (scroll down to the footnote 1) or controls that are small enough.

3. Texts: disable wrapping → <Text wrapping="false" renderWhitespace="false" text="..." />.

   To keep the control height always stable, the wrapping and renderWhitespace properties in the sap.m.Text control, for example, must be set to false.

Using bigger controls or wrapping texts often causes miscalculation of the vertical scroll height. Try to avoid them.

---

To learn more about the supported controls, see Cell Level from the Fiori design guideline.

Answer 2

I think this is a known issue, and the solution is set a fixed 'rowHeight' that wraps the content in the rows cells. This is like that because the table is redered first (with the scrollbar) based on the number of items it is gonna take ($count request in your odata for example), and later the data is fetched and binded with your cells controls. If there are big controls, they expand the cells height after the scrollbar was redered, therefore you cannot scroll till the end.

My suggestions are:

• option 1.- to set a rowHeight large enough to wrap your biggest cell content
• option 2.- use a factory function setting a different rowHeight for ech row (never tried this before, but it may work)
• option 3.- use the Responsive Table, which is much better for this dynamic sizing (sap.m.Table)