Reputation: 11
In my SAPUI5 project, my table gets cut off. I am pretty sure that this is because the height of my div is not handling that size, but I am unable to change it dynamically according to my view's height.
(Scroll ends there, the table gets cut)
My index.html contains the following:
<!-- Right Sidebar -->
<section class="c1" >
<div id="content"></div>
</section>
I am placing my view inside the "content" div.
function loadView() {
var app = new sap.m.App({
initialPage: "idViewTest1"
});
var page = sap.ui.view({
viewName: "myViews.viewTest",
type: sap.ui.core.mvc.ViewType.XML
});
app.addPage(page);
app.placeAt("content");
}
Then, I have my view with some graphs and a table
<Page showHeader="false" enableScrolling="false">
<VBox>
<viz:VizFrame xmlns="sap.viz" id="idcolumn" vizType="line"</viz:VizFrame>
<Table
id="idTable"
items="{/itemsTest}"
class="sapUiSizeCompact"
width= "50%">
<columns>
<Column width= "60%">
<Text text="Description"/>
</Column>
<Column width= "40%">
<Text text="Value"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells></cells>
</ColumnListItem>
</items>
</Table>
</VBox>
</Page>
And finally, I have the controller:
onInit: function() {
var oVizFrame = this.getView().byId("idcolumn");
//code to populate the vizframe
var oTable = this.byId("idTable");
//code to populate the table
}
Upvotes: 1
Views: 932
Reputation: 2256
As per your code
<Page showHeader="false" enableScrolling="false">
The table is cutting off because the page scrolling is disabled.
Solution:
enableScrolling
property: <Page showHeader="false">
OR enableScrolling
property to true
: <Page showHeader="false" enableScrolling="true">
Upvotes: 2