I am using an sap.m.table. The number of rows is too big to fit on the page. Therefore, I expect the table to offer a scrollbar. But that is not the case.
UI5 Version: 1.68.1 Tested in Edge, Firefox, Chrome.
Here is a simple demo app displaying 1 Table with 1 column and 25 rows. Only first 18 items fit on the screen but no scrollbar is offered:
App.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
], function(Controller, JSONModel) {
"use strict";
return Controller.extend("TableTest.controller.App", {
onInit: function() {
var data = {
items: [
{
name: "item1"
},
{
name: "item2"
},
{
name: "item3"
},
...
]
};
var oModel = new JSONModel(data);
this.getView().setModel(oModel);
}
});
});
App.view.xml
<mvc:View
controllerName="TableTest.controller.App"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Table
id="table"
items="{/items}">
<headerToolbar>
<Toolbar>
<content>
<Title text="sap.m.Table"/>
</content>
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Text text="Name"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{name}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
I'm guessing you are launching your app with the Component.js
as entry point so in your App.view.xml
wrap your table in
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="{i18n>title}">
<content>
//your table here
</content>
</Page>
</pages>
</App>
</Shell>
This actually helped to solve the issue in my test app. A <Shell> was already being created in the <script> in index.html. However, I had to add a <Page> to make the scrollbar visible. In my real app the sap.m.table is placed in the following hierarchy of controls: <Shell><App><semantic:FullScreenPage><semantic:content><layout:FixFlex><layout:flexContent><IconTabBar><items><IconTabFilter><core:Fragment> which is containing the table. After copying this strucutre to my test app I think the FixFlex/flexContent is the issue. When I add those, the scrollbar disappears. Is it possible to fix this?
If it helped, please give an upvote to my answer. In your comment you are asking a different question though...
Sure, will upvote. The solution to my issue is the minFlexSize="1" attribute in the <layout:FixFlex>. Setting this attribute enables scrolling in the <layout:flexContent> part of the <layout:FixFlex>.