sap.ui.table.Table: not able to see all data

问题

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;
}

回答1:

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)

回答2:

sap.ui.table.* tables support only a limited set of controls which are listed the doc as well as in the UX guideline. Additionally, text wrapping should be disabled.

Remove CSS rules that might manipulate cell heights.
Make sure only the supported controls are used as template.
Disable wrapping: <Text wrapping="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.^src

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

来源：https://stackoverflow.com/questions/49119692/sap-ui-table-table-not-able-to-see-all-data

标签

sapui5