Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
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: 

Using css viewport dimensions in UI5 to fix issues in simple snippets

NabiZamani
Contributor
‎06-19-2017 7:22 PM
What would you expect with the following simple code (see live on jsbin😞
<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <div style="height:100%; background-color: green;">What would you expect?</div>

</body>

</html>

 

This does NOT render a full height div as you can easily see from the green background color! HTML/CSS hackers know why and there are many options to get a what we want: a full height and full width div inside the body. One option that I like is working with viewport relative values, i.e. with vh and vw. You could set position:absolute + width:100% on the div instead (there are other option as well), but my point is something else. Never heard of vh and vw? Here is an example to fix the code above the way I want it:
<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body style="height:100vh; width:100vw;"> <!-- width:100vw; is not needed here -->

  <div style="height:100%; background-color: green;">What would you expect?</div>

</body>

</html>

 

Now we have a full height div. And here is the spec telling you more about vh, vw, and even vmin and vmax:



















vw 1% of viewport’s width
vh 1% of viewport’s height
vmin 1% of viewport’s smaller dimension
vmax 1% of viewport’s larger dimension

 

So now we know that vh/vw/vmax/vmin is standard, while vmax has restrictions on some microsoft browsers (see caniuse).

Knowing this can be helpful here and there in UI5, i.e. when implementing some small snippets etc. To show you why let's have look at some more code (jsbin😞

 
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

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

    	<meta name="viewport" content="width=device-width, initial-scale=1">

      

        <title>SAPUI5 single file template | nabisoft</title>

      

        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"

            id="sap-ui-bootstrap"

            data-sap-ui-theme="sap_belize"

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

            data-sap-ui-preload="async"></script>

 

        <script>

            sap.ui.getCore().attachInit(function () {

                "use strict";

 

                new sap.m.Panel({

                  headerText : "Panel 1",

                  height     : "200px",

                  width      : "100%",

                  backgroundDesign: "Solid",

                  expanded   : true

                }).placeAt("content");

 

            });

        </script>

 

    </head>

 

    <body class="sapUiBody">

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

    </body>

</html>

 

Nothing special so far - just a panel of 200px height. And of course it works jus fine... Now we want the panel to have a height of 200%, see this jsbin here:
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

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

    	<meta name="viewport" content="width=device-width, initial-scale=1">

      

        <title>SAPUI5 single file template | nabisoft</title>

      

        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"

            id="sap-ui-bootstrap"

            data-sap-ui-theme="sap_belize"

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

            data-sap-ui-preload="async"></script>

 

        <script>

            sap.ui.getCore().attachInit(function () {

                "use strict";

 

                new sap.m.Panel({

                  headerText : "Panel 1",

                  height     : "200%",      //oooops

                  width      : "100%",

                  backgroundDesign: "Solid",

                  expanded   : true

                }).placeAt("content");

 

            });

        </script>

 

    </head>

 

    <body class="sapUiBody">

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

    </body>

</html>

 

Ooops, now again we have an issue because the panel does not look like it has the height of 200%, right? Same reason as above, and again HTML/CSS hackers know why... And this jsbin shows us what we could do:
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

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

    	<meta name="viewport" content="width=device-width, initial-scale=1">

      

        <title>SAPUI5 single file template | nabisoft</title>

      

        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"

            id="sap-ui-bootstrap"

            data-sap-ui-theme="sap_belize"

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

            data-sap-ui-preload="async"></script>

 

        <script>

            sap.ui.getCore().attachInit(function () {

                "use strict";

 

                new sap.m.Panel({

                  headerText : "Panel 1",

                  height     : "200%",

                  width      : "100%",

                  backgroundDesign: "Solid",

                  expanded   : true

                }).placeAt("content");

               

            });

        </script>

 

    </head>

 

    <body class="sapUiBody">

        <div id="content" style="height:100vh; width:100vw;"></div>

        <!-- width is actually not needed here -->

    </body>

</html>

 

It's tempting to use viewport dimensions directly on a ui5 control. Let's give it a try in the following jsbin snippet:
new sap.m.Panel({

    headerText : "Panel 1",

    height     : "200vh",

    width      : "100vw",

    backgroundDesign: "Solid",

    expanded   : true

}).placeAt("content");

 

However, doing this gives us the following error in the console:

Error: "200vh" is of type string, expected sap.ui.core.CSSSize for property "height" of Element sap.m.Panel#__panel0

 

So it seems sap.ui.core.CSSSize does not (yet) support viewport dimensions. Initially I wanted to create a pull request for this feature (or is it a bug?), but then I saw the code and the horrible regex 🙂 Instead, I will open an issue on github referring to this blog as the example 🙂

I did not describe the "whys", but google serves great finding the answers. Also, I did not tell you anything about the differences between vh/vw viewport dimensions and % values. Google knows the difference, or you could start here on stackoverflow:

 

Cheers, Nabi
Labels in this area
Popular Blog Posts