cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Fix element height proportional to screen height

Former Member

on ‎01-09-2015 3:05 AM

0 Kudos

Hello,

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.

Thanks,

Indrajit

Show replies
Show replies
Answer

Accepted Solutions (0)

Answers (3)

Answers (3)

Former Member
‎05-17-2016 1:58 PM
0 Kudos

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

Show replies
Show replies
former_member182862
Active Contributor
‎01-09-2015 5:59 AM
0 Kudos

Hi Indrajit

Is this what you are looking for

Example

thanks

-D

Show replies
Show replies
Former Member
‎01-09-2015 6:29 AM
0 Kudos

Hi Dennis,

Thanks for your response.

I am using SAP Web IDE for the UI5 development.

I see you have implemented the requirement using the following CSS code -

.flexEx .sapMFlexItem:first-child {

  height: calc(100% - 50px);

}

where flexEx is the styleclass associated to the flexbox.

Could you please suggest where do I implement the css code in SAP Web IDE.

Thanks,

Indrajit

former_member182862
Active Contributor
‎01-09-2015 6:59 AM
0 Kudos

HI Indrajit

It is a matter of how your workspace is organized. If you add it to the index.html or the html page that you have as



<style>


.flexEx .sapMFlexItem:first-child {   height: calc(100% - 50px); }


</style>

in the <head> section

it will work.

-D

Former Member
‎01-14-2015 4:04 AM
0 Kudos

Hi Dennis,

Thanks for your help.

The above solution is not working in the UI5 application that I am developing in SAP Web IDE.

In the "index.html" file, I have created 2 style classes as mentioned below -

<style type="text/css">

           .flexEx .sapMFlexItem:first-child {

                height: calc(100% - 50px);

            }

          

           .style1{

                background-color: #C0C0C0 ;

            }

           

</style>

In the "view.js" file, I have assigned style class flexEx to the Flexbox item and the  style class style1 to some buttons. The buttons are getting the background color, meaning style class style1 is working fine, but the code for flexEx style class is not working, i.e. the first child (table) is not getting fixed height in the view. Following is the relevant code section from the view.

// Scroll Container

     var scroll = new sap.m.ScrollContainer({

                                                width : "100%",

                                                height: "100%",

                                                vertical :true,

                                                content: oTab

                                            });

   

// Flex box

  var LayoutParent = new sap.m.FlexBox({

                                        items: [ scroll,       // Scroll Container with Table

                                                 new sap.m.Button({

                                                                text: "Back to Main Menu",

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

                                                                    press: [oController.handle_back, oController],

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

                                                                    })

                                                  ],

                                        direction: "Column"  // Vertically arranged  

                                      }); 

                                     

  LayoutParent.addStyleClass("flexEx");                                    

      

  LayoutParent.setModel(oModel);     

  var page2 =  new sap.m.Page({ title: "Test Report",

                                                     layout: LayoutParent,

                                                     content: [LayoutParent]

                                                   });

   return page2;

Thanks,

Indrajit

former_member182862
Active Contributor
‎01-14-2015 4:16 AM
0 Kudos

I suppose the view is contained in the index.html.

can you inspect element from browser debugger and figure this out?

Thanks

-D

Former Member
‎01-14-2015 4:46 AM
0 Kudos

Hi Dennis,

Yes, the view is contained in the index.html. Do I need to change anything?

<!DOCTYPE HTML>

<html>

  <head>

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

  <script src="resources/sap-ui-core.js"

               id="sap-ui-bootstrap"

              data-sap-ui-libs="sap.m"

             data-sap-ui-resourceroots='{"view": "./"}'

             data-sap-ui-theme="sap_bluecrystal">

  </script>

  <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

    

     <!-- custom code to include css style class -->

     <style type="text/css">

           .flexEx .sapMFlexItem:first-child {

                height: calc(100% - 50px);

            }

          

           .style1{

                background-color: #C0C0C0 ;

            }

           

         </style>

    

  <script>

            sap.ui.localResources("view");

            var app = new sap.m.App({initialPage:"idView1"});

            var page = sap.ui.view({id:"idView1", viewName:"view.View1",                                  type:sap.ui.core.mvc.ViewType.JS});

 

            var page1 = sap.ui.view({id:"idView2", viewName:"view.View2", type:sap.ui.core.mvc.ViewType.JS});

 

            app.addPage(page),app.addPage(page1);

            app.placeAt("content");

  </script>

  </head>

  <body class="sapUiBody" role="application">

  <div id="content"></div>

  </body>

</html>

former_member182862
Active Contributor
‎01-14-2015 4:51 AM
0 Kudos

This is strange.

Can you add !important to the css

           .flexEx .sapMFlexItem:first-child {
                height: calc(100% - 50px) !important;
            }
Former Member
‎01-14-2015 5:14 AM
0 Kudos

Hi Dennis,

Thanks.

The "!important" addition did not work.

I tried specifying a fixed height in the style class, as below and then it works

.flexEx .sapMFlexItem:first-child { height: 500px; }


However if we specify the height as %, say

   .flexEx .sapMFlexItem:first-child { height: calc(100% - 50px) !important; }

then it is not working. I think the issue is "%" is not being calculated since there is no absolute height specified for the parent scroll container.

But I cannot specify an absolute height for the parent scroll container, because the application has to be executed in devices with different height. This does not go well with the perception that Fiori / UI5 applications adjust to screen size.

Thanks,

Indrajit


former_member182862
Active Contributor
‎01-14-2015 5:17 AM
0 Kudos

you need to set the height of html and body.

Like this

html, body
{
    height: 100%;
}
kedarT
Active Contributor
‎01-09-2015 4:35 AM
0 Kudos

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


Show replies
Show replies
Former Member
‎01-09-2015 4:44 AM
0 Kudos

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.

Thanks,

Indrajit

Ask a Question