The feature visibleRowCountMode="Auto" in sap.ui.table.Table does not function properly when used in conjunction with a VBox (FlexBox) layout

I am trying to adjust the number of rows in my sap.ui.table.Table to fit the screen height. Initially, I attempted to use 

visibleRowCountMode="Auto"
, but it was ineffective because some parent elements lacked a height="100%".

The structure of my views involves deep nesting of the table within multiple Pages and FlexBoxes.

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

In addition, I included the following CSS snippet:

html, body {
  height: 100%;
}

Despite referencing potential solutions from other inquiries, this approach did not resolve the issue for me. Upon inspecting the DOM via Chrome Dev-Tools, I noticed that a directly-parent <div> of the table-control (implicitly generated by UI5) lacked the necessary style attribute height: 100%.

https://i.sstatic.net/9ftgC.png

Implementing the height manually on that particular element allowed 

visibleRowCountMode="Auto"
to function as intended. However, I consider this workaround unsightly and am seeking a more elegant solution to address this challenge. Currently, upon loading the View, I programmatically adjust the height of the table's parent <div> element within the controller's onAfterRendering method.

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

As this interim fix is far from ideal, I remain open to insights regarding the root cause and a more effective resolution to this issue.

csssapui5

Answer №1

To ensure that the 

visibleRowCountMode="Auto"
or sap.ui.table.rowmodes.Auto functions properly with sibling controls in a table, it is necessary for the table to be allowed to expand within a flexbox element (such as sap.m.VBox). This can be accomplished by including 
<<a href="https://sdk.openui5.org/api/sap.m.FlexItemData" rel="nofollow noreferrer">FlexItemData</a> growFactor="1" />
in the layoutData aggregation of the table.

<VBox xmlns="sap.m" renderType="Bare" fitContainer="true"><!-- or height="100%" -->
  <table:Table xmlns:table="sap.ui.table" visibleRowCountMode="Auto">
  <!-- visibleRowCountMode deprecated since 1.119 -->
  <!-- Add sap.ui.table.rowmodes.Auto to the aggregation rowMode instead. -->
    <table:rowMode><!-- since UI5 1.119 -->
      <rowmodes:Auto xmlns:rowmodes="sap.ui.table.rowmodes" />
    </table:rowMode>
    <table:layoutData><!-- Every control has the aggregation layoutData -->
      <FlexItemData growFactor="1" /><!-- Allow the Table to grow -->
    </table:layoutData>
    <table:columns>
      <!-- ... -->
    </table:columns>
  </table:Table>
  <Button /><!-- Other flex box sibling items ... -->
</VBox>

Referencing the API reference of sap.ui.table.rowmodes.Auto:
Similar description in the old 

visibleRowCountMode="Auto"

It is essential for the table to be rendered without any siblings in the DOM, except when its parent element is a flexbox and the table is permitted to both grow and shrink as a flex item.

Check out this brief demonstration:

globalThis.onUI5Init = () => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/ui/model/odata/v4/ODataModel",
  "sap/ui/model/json/JSONModel",
], async (XMLView, ODataModel, JSONModel) => {
  "use strict";
  
  const control = await XMLView.create({
    definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc"
      xmlns="sap.m"
      xmlns:table="sap.ui.table"
      displayBlock="true"
      height="100%"
    >
      <App autoFocus="false">
        <Page showHeader="false">
          <VBox
            fitContainer="true" 
            renderType="Bare"
          >
            <ToggleButton
              pressed="{viewModel>/grow}"
              text="{= %{viewModel>/grow} ? '' : 'Enable '}Growing Automatically"
              type="Neutral"
            />
            <table:Table xmlns:table="sap.ui.table"
              class="sapUiSizeCondensed"
              columnHeaderVisible="false"
              selectionMode="None"
              visibleRowCountMode="Auto"
              enableBusyIndicator="true"
              rows="{/People}"
            >
              <table:layoutData>
                <FlexItemData id="myFlexItemData"
                  growFactor="{= %{viewModel>/grow} ? 1 : 0}"
                  backgroundDesign="Solid"
                />
              </table:layoutData>
              <table:rowMode><!-- since UI5 1.119 -->
                <rowmodes:Auto
                  xmlns:rowmodes="sap.ui.table.rowmodes"
                  minRowCount="3"
                />
              </table:rowMode>
              <table:columns>
                <table:Column>
                  <Text text="First Name" />
                  <table:template>
                    <Text text="{FirstName}" />
                  </table:template>
                </table:Column>
                <table:Column>
                  <Text text="Last Name" />
                  <table:template>
                    <Text text="{LastName}" />
                  </table:template>
                </table:Column>
              </table:columns>
            </table:Table>
          </VBox>
        </Page>
      </App>
    </mvc:View>`,
    models: {
      undefined: new ODataModel({
        serviceUrl: "https://services.odata.org/TripPinRESTierService/(S(w2saquxz0v41rmteqmgyytks))/",
        autoExpandSelect: true,
        sharedRequests: true,
      }),
      "viewModel": new JSONModel({ grow: true }),
    },
  });

  control.placeAt("content");
});
<script id="sap-ui-bootstrap"
  src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.table,sap.ui.layout,sap.ui.unified"
  data-sap-ui-async="true"
  data-sap-ui-on-init="onUI5Init"
  data-sap-ui-compat-version="edge"
  data-sap-ui-exclude-jquery-compat="true"
  data-sap-ui-resource-roots='{ "my.demo": "./" }'
  data-sap-ui-xx-wait-for-theme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

Click on Run Code Snippet and then select "Full Page" to witness the table automatically adjusting its height based on the viewport size.

API reference: sap.ui.table.rowmodes.Auto
Comprehending flex-grow, flex-shrink, and flex-basis

Answer №2

Check out this live example: Nested Table Layout. I've even added a Text element to demonstrate how styling can vary based on the number of child elements in each box.

The key thing to note is that when VBox/HBox is created, it automatically wraps UI controls inside an additional div element. Consequently, not only does the Box element need to have its height set to 100%, but the 'item' within the box element also needs to be adjusted accordingly.

Alternatively, you could modify the property renderType="Bare" and then manage the styles accordingly. Check out the documentation here:

P.S. Please excuse any formatting issues (still getting the hang of Stack Overflow)

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

Answer №3

For better layout consistency, consider adding renderType="Bare" to all FlexBoxes that are relevant. As stated in the API reference:

renderType

This attribute determines whether the layout is displayed as divs or an unordered list (ul).

It is generally recommended to use Bare to avoid any potential layout issues caused by inconsistencies across browsers.

Additionally,

Bare

With this setting, UI5 controls will not be enclosed in an extra HTML element.

Therefore, ensure that the parent of the table corresponds to the VBox element with 100% height without an intervening div element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify the size of a div based on the status of a checkbox using only HTML and CSS

Here is a small project that I created using only HTML & CSS. The goal is to modify the properties of the <div class="pro"> when the checkbox is checked. When this happens, all other <div class="pro"> elements should be hidden and the <art ...

htmlcsscheckbox

When the screen size decreases, display the title on two lines

Currently, I am in the process of developing a react web application with the assistance of redux. My main objective is to ensure that the page is highly responsive. At this point, there is a title positioned at the top displaying: Actions to do: Past due ...

htmlcssreactjs

Resetting the state of toggle/click states in AJAX and jQuery

Currently, I am encountering a small dilemma with a .on function and AJAX in conjunction with a mobile menu. The mobile menu is located in the header of a site that relies heavily on AJAX for its content loading. This poses an issue because when an AJAX ca ...

javascriptjqueryhtmlcssajax

Separate each menu item by using the pipe symbol within the list tags

Can you help me style the menu list in CSS by adding a separator | between each element? I attempted using content: "|", but it didn't produce the desired outcome. The current look of the menu is as follows: <ul> <li><a href="..."& ...

htmlcss

Utilizing Loops to Generate Unique CSS Designs on an HTML Page

View reference image ->Take a look at the reference image provided. ->In the image, a for loop is used to create box designs and displayed above. ->The goal is to change the background color and border color of all boxes using a single HTML cla ...

javascripthtmlcssangular

Is there a way to verify the content inside the :before selector using Jasmine within an Angular 6 application?

Looking to test whether the content of a label changes based on the checkbox being checked using Jasmine in an Angular 6 project. Is this feasible? Code snippet: HTML <input id="myCheck" class="checkbox" type="checkbox" /> <label for="myCheck" ...

javascriptcssangularjasminekarma-jasmine

Unclear about the concept of mobile responsive websites or similar

I recently came across a tool on http://skweezer.com/ that allows you to see how a website will appear on mobile browsers. I decided to test it out with the url http://sachindra149.wordpress.com/ and was shocked by the results. 1) Can someone explain why ...

htmlcss

Are the methods of implementing a modal in JavaScript, HTML, and CSS similar to those in Electron JS?

Struggling to implement a button that triggers a modal display using JavaScript? The HTML and CSS components are set up correctly, but the JavaScript functionality seems to be causing issues. Is it possible that Electron JS differs from traditional JavaScr ...

javascripthtmlcsselectron

Adjusting Header Size While Scrolling in Angular

Looking for assistance with AngularJS regarding handling events (specifically scrolling). I am trying to dynamically change the size of the header based on whether the user scrolls up or down. Below is a snippet of JavaScript code that achieves this effect ...

javascriptjqueryhtmlcssangularjs

Troubleshoot: Why is my Bootstrap 3 responsive navigation bar not functioning

When using drop down items that are longer in length, they tend to wrap down to the next level rather than overflowing. I am not well-versed in @media queries, but I've noticed that on mobile devices the dropdown collapses in the navigation menu, whil ...

csstwitter-bootstraptwitter-bootstrap-3

What are some tips for streamlining a Bootstrap menu?

Would it be possible to create a composite class that encompasses various other classes? In the Bootstrap menu, we observe multiple anchor tags with identical combinations of classes such as: <a class="nav-item nav-link" asp-controller="Account" asp-a ...

cssbootstrap-4

Generate PHP web pages automatically

I'm seeking assistance on automating the creation of individual PHP pages. Currently, I have a page called catalog.php set up. Within catalog.php, there is an SQL query that connects to the database and retrieves specific information: $link = mysql ...

phpmysqlhtmlcss

Larger icon graphics

Is it possible to increase the size of Glyphicons in Twitter Bootstrap 3.0 without using the btn-lg class? I found this code that makes glyphicons big: <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-th- ...

csstwitter-bootstraptwitter-bootstrap-3glyphicons

ReactJS does not update the conditional CSS class when hovering with mouseOnEnter or mouseOnOver

I am currently attempting to showcase data in a table where each row features an info icon that is only visible upon hovering. Additionally, I want a pop-up to appear when the info icon is clicked (there is an onclick function assigned to this button). He ...

javascriptcssreactjsreact-nativereact-redux

selenium button in div overlay is interactive during manual testing but unresponsive while automated

<div class="t-window-content t-content" style="overflow: auto; width: 400px; height: 389.4px;"> <div id="frmSchTarget"> <form action="/Search/SearchTypePreName" method="post" onclick="Sys.Mvc.AsyncForm.handleClick(thi ...

pythonhtmlcssselenium

What is the initial value assigned to the "position" attribute of a DIV element by default?

Can you tell me what the default value for the "position" attribute of a DIV is? Similar to how a DIV's display property is BLOCK, I'm curious about the default property for the position attribute. ...

htmlcss

CSS property that determines where a string can be broken into lines based on specific characters

Is it possible to specify characters on which a long string, such as a URL, should break in browsers? For instance: https://www.this-is-my-url.org/upload_dir/2015/01/foo_bar_faq.pdf If the box only allows 40 characters per line, it might break like this ...

htmlcss

Steps for designing a stationary footer in HTML and CSS

I have implemented a static footer on my website: HTML <div class="card fixedFooter"> <div class="card-body space-around"> <button type="button" class="buttonFooter" routerLink="/myRouter" > <i class ...

htmlcssbootstrap-4footer

What is the best way to prevent content from spilling over into the div on the right

I'm having trouble with a two column div where the text in the left column is overflowing into the right column. How can I prevent this? http://example.com <div id="wrapper-industry"> <div id="wrapper-form"> <div id="form_row"> ...

csshtml

What is the best way to extract text from a class using selenium?

<div class="class-one"> <div class="class-two"> lorem ipsum <div class="class-three"> <a href="https://yahoo.com" target="" class="btn btn--primary btn--purple " id="" title="find"><i class="fal fa-fw fa-file-word"></i>& ...

pythoncssselenium