CODEWITHSUNDEEP
javascriptlayoutsapui5
ap0
ap0

Reputation: 1173

Fit OpenUI5 BorderLayout to Screensize

I am using a small script (full code at the bottom of the question) to create a BorderLayout - top, left, right and center. I fill those parts with sap.ui.commons.layout.BorderLayoutAreas (as shown in this examples.)

My main problem is that I want this Layout to fit the whole Browser screen, being resized if the broswer windows is resized. For that the BorderLayout has the properties width and height for which I set a size. But it doesn't work as expected. For example If I replace the width with 100% or auto the application width is always adjusted correctly and fills the browser (in width). For some reason this does not work for the height. As soon as I enter something different from a pixel value (e. g. 900px) all controles dissapear and the window is empty.

Am I using it wrong or is there another way to fith the whole application to the screen?

<!DOCTYPE html>
<html>
    <meta http_equiv='X-UA-Compatible' content='IE=edge'/>
    <title>OpenUI5 Demo</title>

    <script id='sap-ui-bootstrap'
    src='/js/openui5/resources/sap-ui-core.js'
    data-sap-ui-theme='sap_bluecrystal'
    data-sap-ui-libs='sap.ui.commons'></script>

    <script>
        var oBorderLayout1 = new sap.ui.commons.layout.BorderLayout("BorderLayout1", {
            width : "100%",
            height : "100%", // THE APPLICATION ONLY WORKS WHEN THIS LINE IS SET TO A PIXEL (e. g. "300px") VALUE
            top : new sap.ui.commons.layout.BorderLayoutArea({
                size : "20%",
                contentAlign : "center",
                visible : true,
                content : [new sap.ui.commons.TextView({
                    text : 'Top Area',
                    design : sap.ui.commons.TextViewDesign.Bold
                })]
            }),
            bottom : new sap.ui.commons.layout.BorderLayoutArea({
                size : "20%",
                contentAlign : "center",
                visible : true,
                content : [new sap.ui.commons.TextView({
                    text : 'Bottom Area',
                    design : sap.ui.commons.TextViewDesign.Bold
                })]
            }),
            begin : new sap.ui.commons.layout.BorderLayoutArea({
                size : "20%",
                contentAlign : "center",
                visible : true,
                content : [new sap.ui.commons.TextView({
                    text : 'Begin Area',
                    design : sap.ui.commons.TextViewDesign.Bold
                })]
            }),
            center : new sap.ui.commons.layout.BorderLayoutArea({
                contentAlign : "center",
                visible : true,
                content : [new sap.ui.commons.TextView({
                    text : 'Center Area',
                    design : sap.ui.commons.TextViewDesign.Bold
                })]
            }),
            end : new sap.ui.commons.layout.BorderLayoutArea({
                size : "20%",
                contentAlign : "center",
                visible : true,
                content : [new sap.ui.commons.TextView({
                    text : 'End Area',
                    design : sap.ui.commons.TextViewDesign.Bold
                })]
            })
        });

        oBorderLayout1.placeAt("body");
    </script>

    <body>
        <div id='body'></div>
    </body>
</html>

Upvotes: 1

Views: 1381

Answers (2)

akudev
akudev

Reputation: 784

this is a very basic CSS topic and not at all related to UI5:

In CSS percentage heights only work if the height of the parent element is defined. Either as an absolute value, or as a relative value, but the parent of it is absolute-height etc. Elements with no height basically say "I am as tall as my content" and when the content then has 100% height, it says "I am as tall as my parent", so that's a shortcut/deadlock and the height collapses to zero. Also note that the <html> and <body> root elements also have no fixed height by default, so they also behave the same way.

So the easy solution to make 100% height work is to set the height of the parent to a fixed value or to set ALL the parents up to the very root of the page to 100% height - in your example:

<style>
html, body, #body {
height: 100%;
}
<style>

See jsbin for a running version: http://jsbin.com/bonacohefu/1/edit

Upvotes: 2

Osamah Aldoaiss
Osamah Aldoaiss

Reputation: 328

It seems like this is a bug, if you look into the API it says that the default for width and height is 100% but it doesnt seem to work for the height property.

I added it to a test page, and it had the same behavior as your example.

Upvotes: 1

Related Questions