HTML table cell text overlapping in SAP.UI5

Question

Text overlapping issue with sap.ui.core.HTML control inside sap.ui.table.Table

I am trying to build a sap.ui.table.Table in SAP.

The data inside for one column is in HTML format. First time display is fine. But when I am scrolling down across the table & again scrolling to top, data inside cell is overlapping to the previous cell data.

See the below screenshot before & after scrolling

Some text in the first column first cell is getting added when I scroll my mouse down in the second time. Please compare the two images carefully.

I am trying the following code:

<ui:Table id="table"  enableBusyIndicator="true" rowHeight="38" columnHeaderHeight="21" enableColumnReordering="false"
       selectionMode="Single" cellClick="onCellClick"  visibleRowCountMode="Auto"  selectionBehavior="RowOnly" class="requirementTypesTable" rows="{approvalModel7>/results}">
    <ui:toolbar>
                             <Toolbar class="tableToolbar toolbar">
                                                   <SearchField id="Phrase_desc"
                              search="onSearchField" liveChange="onSearchField"
                              width="413px" class="toolbar searchfield" />
                              <SearchField id="Status_desc" liveChange="onSearchField"
                              search="onSearchField" class="toolbar"/>
                              <SearchField id="Geography_desc" liveChange="onSearchField"
                               visible="false" class="toolbar" 
                              search="onSearchField"/>
                               <SearchField id="Regulatory_desc" liveChange="onSearchField"
                                visible="false"  class="toolbar"
                              search="onSearchField"/>
                               <SearchField id="Author_desc" class="toolbar" liveChange="onSearchField"
                              search="onSearchField"/>
                             </Toolbar>
              </ui:toolbar>

    <ui:columns >
     <ui:Column   width="420px"   hAlign="Left"
     resizable="false" flexible="false"
autoResizable="true">
       <Toolbar class="">
<ToolbarSpacer/>
            <Label text="Phrases" class="headerClass commonSorting"  />

                              <ToolbarSpacer/>

                                    <Button id="idPAsc" icon="sap-icon://sort-ascending" class="ButnInner ascdecBIcon" press="onAPhrase"></Button>
                                    <Button id="idPDsc" icon="sap-icon://sort-descending" class="ButnInner ascdecBIcon" press="onDPhrase"></Button>                           
        </Toolbar> 
      <ui:template>
    <core:HTML  id="test" preferDOM="false" content="{approvalModel7>Phrase_desc}">

       </core:HTML>
      </ui:template>
     </ui:Column>
     <ui:Column hAlign="Center" 
      resizable="false" flexible="false"
autoResizable="true">
                             <Toolbar class="tableToolbar">
<ToolbarSpacer/>                             
      <Label class="headerClass commonSorting" text="Status"/>
        <ToolbarSpacer/>
                <Button id="idSAsc" icon="sap-icon://sort-ascending" class="ButnInner ascdecBIcon" press="onAStatus"></Button>
                 <Button id="idSDsc" icon="sap-icon://sort-descending" class="ButnInner ascdecBIcon" press="onDStatus"></Button>
           </Toolbar>  

      <ui:template>
       <Text class="Phrases element.style" text="{approvalModel7>Status_desc}" tooltip="{approvalModel7>Status_desc}" wrapping="false"/>
      </ui:template>
     </ui:Column>
     <ui:Column hAlign="Center"     id="geohide"     visible="false"  
      resizable="false" flexible="false"
autoResizable="true">
       <Toolbar class="tableToolbar">
                             <ToolbarSpacer/>

      <Label class="headerClass commonSorting" text="Geography"/>
        <ToolbarSpacer/>   
                                    <Button id="idGAsc" icon="sap-icon://sort-ascending" class="ButnInner ascdecBIcon" press="onAGeo"></Button>
                                    <Button id="idGDsc" icon="sap-icon://sort-descending" class="ButnInner ascdecBIcon" press="onDGeo"></Button>

                              </Toolbar>  
      <ui:template>

       <Text class="Phrases" text="{approvalModel7>Geography_desc}" tooltip="{approvalModel7>Geography_desc}" wrapping="false"/>

      </ui:template>
     </ui:Column>
     <ui:Column hAlign="Center"    id="reghide" visible="false"  
      resizable="false" flexible="false"
autoResizable="true">
      <Toolbar class="tableToolbar">
              <ToolbarSpacer/>
      <Label class="headerClass commonSorting" text="Regulatory class" />
        <ToolbarSpacer/>
                                    <Button id="idRegAsc" icon="sap-icon://sort-ascending" class="ButnInner ascdecBIcon" press="onARegC"></Button>
                                    <Button id="idRegDsc" icon="sap-icon://sort-descending" class="ButnInner ascdecBIcon" press="onDRegC"></Button>
                              </Toolbar>  
      <ui:template>

       <Text class="Phrases" text="{approvalModel7>Regulatory_desc}" tooltip="{approvalModel7>Regulatory_desc}" wrapping="false"/>

      </ui:template>
     </ui:Column>
     <ui:Column hAlign="Center"   resizable="false" flexible="false"
autoResizable="true">
      <Toolbar class="tableToolbar">
              <ToolbarSpacer/>

      <Label class="headerClass commonSorting" text="Author"/>
       <ToolbarSpacer/>
                                   <Button id="idAAsc" icon="sap-icon://sort-ascending" class="ButnInner ascdecBIcon" press="onAAuthor"></Button>
                                    <Button id="idADsc" icon="sap-icon://sort-descending" class="ButnInner ascdecBIcon" press="onDAuthor"></Button>
                              </Toolbar>  
      <ui:template>
       <Text   class="Phrases"  text="{approvalModel7>Author_desc}" tooltip="{approvalModel7>Author_desc}" wrapping="false"/>
      </ui:template>
     </ui:Column>

    </ui:columns>
   </ui:Table> 

What is the issue, any help will be appreciated greatly. Thanks, in advance

Answer 1

I am not quite sure, but maybe that's a problem with the content that you set to the HTML control. The HTML control is designed to add HTML content seamlessly into the control tree. It therefore does not create additional tags around the HTML. But as a side effect of that design decision, the HTML control has two important constraints:

1. as it doesn't control the outermost DOM of its rendering, that content must fulfill the UI5 needs for a control DOM: it must have an ID that equals the ID of the HTML control ( oHTML.getID() === oHTMLControl.$().attr('id') )
2. to properly integrate with the UI5 rendering and re-rendering, the DOM must have only one root node (UI5 controls cannot have multiple root nodes in their DOM).

Have you tried to switching the "preferDOM" option of the HTML control?

Last but not least, have you tried FormattedText instead