Johan Romay
Johan Romay

Reputation: 11

SAPUI5 view table gets cut off

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

Answers (1)

Inizio
Inizio

Reputation: 2256

As per your code

<Page showHeader="false" enableScrolling="false">

The table is cutting off because the page scrolling is disabled.

Solution:

  • Remove enableScrolling property: <Page showHeader="false"> OR
  • Update enableScrolling property to true: <Page showHeader="false" enableScrolling="true">

Upvotes: 2

Related Questions