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

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply