css - sap.ui.table.Table: visibleRowCountMode="Auto" not working with VBox (FlexBox)

Question

I would like the number rows of my sap.ui.table.Table to fit the screen height. I tried using visibleRowCountMode="Auto" for that but in the beginning, it did not work because certain parent elements did not have a height="100%".

My table is nested quite deeply into several Pages and FlexBoxes but this is kind of how my views look.

<VBox height="100%" class="sapUiTinyMarginBegin">
  <layout:Splitter id="CSL_idSplitter" height="100%" resize=".onSplitterResize">
    <VBox height="100%">
      <HBox justifyContent="SpaceBetween" height="100%">
        <VBox height="100%">
          <table:Table id="idTable" visibleRowCountMode="Auto" />
          <Button />
        </VBox>
      </HBox>
    </VBox>
  </layout:Splitter>
</VBox>

I also added this to my CSS file:

html, body {
  height: 100%;
}

According to other questions, this seemed to be the solution but it did not work for me. I found out that, in the DOM, the direct parent <div> of the table-control (which is automatically created by UI5 and does not seem to belong to any element declared in the view) was the problem because it did not have a style height: 100%.

Here is the DOM from the Chrome Dev-Tools (Yellow is my table and in red is the div without any height):

If I add the height to the element manually, the visibleRowCountMode="Auto" works fine.

So I found a quite ugly workaround and I was hoping that anyone would know a nicer way to overcome this issue. When the View is loaded, I select the parent <div> element of the table and set its height programmatically in onAfterRendering of the controller.

onAfterRendering: function() {
  const oTable = this.byId("idTable");
  const oHTMLElement = document.getElementById(oTable.getIdForLabel());
  oHTMLElement.parentNode.style.height = "100%";  
}

Since this is just a workaround, I was wondering where the real problem was lying and if anyone could help me solve it.

Answer 1

Here is a working example: Table in nested boxes I've also included Text element, so you may see how styling should be applied depending on how many child elements are for each box.

The main thing is that, while VBox/HBox is being created, by default it wraps UI controls inside another div element. Because of that, not only the Box element has to set it's height to 100%, but also the 'item' of this box element.

Other option is to change the property renderType="Bare" and than again work with styles. https://sapui5.hana.ondemand.com/#/api/sap.m.FlexRendertype

P.S. sorry for my styling (still learning stackoverflow)

<mvc:View
   controllerName="sap.ui.sample.App"
   xmlns="sap.m"
   xmlns:l="sap.ui.layout"
   xmlns:core="sap.ui.core"
   xmlns:mvc="sap.ui.core.mvc"
   xmlns:table="sap.ui.table">
   <App>
      <Page>
         <content>
            <VBox class="sapUiTinyMarginBegin VBOX3">            
               <l:Splitter id="CSL_idSplitter" height="100%" resize="onSplitterResize">
                  <VBox class="VBox2">
                     <HBox justifyContent="SpaceBetween" class="HBox1">
                        <VBox class="VBOX1">
                           <table:Table 
                              id="idTable"
                              height="100%"
                              visibleRowCountMode="Auto"
                              fixedBottomRowCount="1"/>
                        </VBox>
                     </HBox>
                  </VBox>
               </l:Splitter>
               <Text text="Hello"/>            
            </VBox>
         </content>
      </Page>
   </App>
</mvc:View>

.VBOX3{
  height: 100% 
}

.VBOX3 div:first-of-type{
  height: 100% 
}

.VBox2{
    height:100%
}

.HBox1{
    height: 100%
}

.VBOX1{
  height: 100% 
}

.VBOX1 > div{
  height: 100% 
}