$(function () { pageContext.i18n.modTalk = 'moderation talk'; pageContext.i18n.replyToComment = 'Reply'; pageContext.i18n.modTalkEmpty = 'moderation talk is empty'; pageContext.url.getModTalk = "/comments/%25ID%25/listModTalk.json"; pageContext.url.possibleCommentRecipients = "/comments/%ID%/possibleRecipients.json"; pageContext.url.commentEdit = '/comments/%25ID%25/edit.html'; pageContext.url.commentView = '/comments/%ID%/view.html'; pageContext.i18n.commentVisibility = { 'full': 'Viewable by all users', 'op': 'Viewable by the original poster', 'mod': 'Viewable by moderators', 'opAndMod': 'Viewable by moderators and the original poster', 'other': 'Advanced visibility', 'dialogTitle': 'Comment visibility', 'selectGroups': 'Visible to groups', 'selectOther': 'Other recipients', 'selectOriginalPoster': 'Original poster', 'selectModerators': 'Moderators', 'selectAssignees': 'Asked to answer users' }; pageContext.i18n.commentMenuLabels = { 'comment-edit': 'comments.menu.edit', 'comment-delete': 'comments.menu.delete', 'comment-convert': 'comments.menu.convert' };pageContext.i18n.answer= { bestAnswer: 'Best Answer', controlBar : { accept: 'Accept', unaccept: 'Unaccept', acceptCommand: 'Accept this answer as correct', cancelAcceptedCommand: 'Remove this answers accepted status' } }; window.croles = { u: false, op: false, m: false, og: false, as: false, ag: false, dc: false, doc: false, eo: false, ea: false }; tools.init({ q: { e: false, ew: false, eo: false, r: false, ro: false, d: false, dow: false, fv: false, c: false, co: false, p: false, tm: false , ms: false, mos: false }, n: { f: false, vf: false, vfo: false, vr: true, vro: true, c: false, co: false, vu: false, vd: false, w: false, wo: false, l: false }, c: { e: false, eo: false, d: false, dow: false, ta: false, tao: false, l: false }, a: { e: false, ew: false, eo: false, d: false, dow: false, a: false, aoq: false, ao: false, tc: false, tco: false, p: false, tm: false }, pc: croles }, { tc: true, nsc: true }); commandUtils.initializeLabels(); }); Skip to Content
avatar image
Former Member

Fix element height proportional to screen height


I am developing a UI5 view using sap.m library components.

In my page, I have a flexbox - containing a table and a button below the table.

// Table

   var oTab = new sap.m.Table( "oTab", { ....... } );

// Layout - Implementing a FlexBox becuase table should be left justified and button should be center justified

  var LayoutParent = new sap.m.FlexBox( "LayoutParent", {

       items: [ oTab,

                   new sap.m.Button({

                                     text: "Back",

                                     icon : "sap-icon://sys-back-2",

                                     press: [oController.handle_back, oController],

                                     layoutData: new sap.m.FlexItemData({alignSelf: sap.m.FlexAlignSelf.Center })



       direction: "Column"


  // Page  

  var page2 =  new sap.m.Page({

       title: "Report",

   layout: LayoutParent,

   content: [LayoutParent]


The number of records in the table oTab is dynamic.

With the above code, when the number of elements in the table oTab is more than what can be accomodated in the browser, we have to scroll down to view the button "Back".

I want to adjust the view such that the button "Back" is always visible in default browser size (no scrolling to view button) and the table oTab above the button adjusts itself based on browser height (e.g. introduces a scrollbar for table records).

Thanks in advance for any suggestions to implement this.



Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Jan 09, 2015 at 04:35 AM

    Hi Indrajit,

    How about using the properties:

    growing: true

    growingScrollToLoad: true

    Which would display 20 rows and the add pagination at the footer of the table:

    More info can be found here:

    SAPUI5 SDK - Demo Kit

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Hi Kedar,

      Thanks for your response.

      Just setting growingScrollToLoad to true does not help.

      If I set a growingThreshold to a static value, then the table will show those many records by default, even though in browser there is more height available for showing more records. Also when we click on "More" button, the table height will increase thereby introducing scrolling to see the button below the table.



  • Jan 09, 2015 at 05:59 AM

    Hi Indrajit

    Is this what you are looking for




    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    May 17, 2016 at 12:58 PM

    The way you could do this is to use the footer of the page:

    Add comment
    10|10000 characters needed characters exceeded