CODEWITHSUNDEEP
xmlsapui5sap-web-ide
André Gomes
André Gomes

Reputation: 69

Footer doesn't stay at the bottom

I'm trying to create an simple planning app on Sap Web IDE and I have this problem that the footer doesn't stay at the bottom.

The index:

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <link href="https://procensus.com/favicon.ico" rel="shortcut icon" type="image/x-icon" />

    <title>Procensus</title>

    <script id="sap-ui-bootstrap"
        src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-libs="sap.m"
        data-sap-ui-theme="sap_bluecrystal"
        data-sap-ui-xx-bindingSyntax="complex"
        data-sap-ui-preload="async"
        data-sap-ui-compatVersion="edge" 
        data-sap-ui-resourceroots='{"zapp_rej_absence": "./", "sap.ui.demo.mock": "mockdata"}'>
    </script>

    <!-- Application launch configuration -->
    <script>

        sap.ui.getCore().attachInit(function() {
        new sap.m.Shell({
            app: new sap.m.App({
                pages: [
                    new sap.m.Page({
                        title: "Procensus Planning Calender",
                        enableScrolling: true,
                        content: [ new sap.ui.core.ComponentContainer({
                            name: "zapp_rej_absence"
                        })]
                    })]
            })
        }).placeAt("content");
    });

    </script>
</head>

<!-- UI Content -->
<body class="sapUiBody" id="content" role="application">
</body>

The XML:

<mvc:View 
controllerName="zapp_rej_absence.controller.Main" 
xmlns:l="sap.ui.layout"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:commons="sap.ui.commons"
xmlns:core="sap.ui.core"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page
    title="{i18n>loginTitle}"
    showHeader="true">
    <content>

        <VBox alignItems="Center" class="sapUiLargeMarginTop">
            <Panel backgroundDesign="Solid"> 
                <Image width="auto" height="10em" id="__image1" src="images/logo/Logo_iQos.jpg" 
                    class="sapUiSmallMargin"/>
                <VBox alignItems="Center" >
                    <Input id="user" type="Text" placeholder="{i18n>userName}"/>
                    <Input id="pass" type="Password" placeholder="{i18n>password}" />
        <Button class="sapUiSmallMarginTop" text="Login" width="17em" type="Emphasized" press="_logIn" submit="_logIn" />   
                </VBox>

            </Panel>
        </VBox>

    </content>
    <footer>
        <Bar>
            <contentLeft>
                <Text text="{version>/version} {version>/pool}" /> <!-- major.minot.micro - major keep at 1 until major re-release , minor - increment on new feature ; micro - increment on bug fix or minor feature change -->   
            </contentLeft>
        </Bar>
    </footer>
</Page>

Final Result - Mine

Result from Loki code

*Note: The calendar needs to be (as far as I know) inside a Panel tag so it doesn't disappear. And since the footer doesn't exist on the Panel tag, I've created a Page tag after closing the Panel one.

Upvotes: 0

Views: 662

Answers (2)

loki
loki

Reputation: 648

I made the changes. You need to bind your values in the view what you have from your model and i8nproperties. I had no values and i8nproperties so left them blank but i created a skeleton if it is correct you may refer it.

Check the below three images: 1) index.html 2) view.xml 3)output index.html

View1.view.xml

output

Upvotes: 1

emch2
emch2

Reputation: 241

I think your xml-structure is wrong. It should work if you do it like this:

<mvc:View .......
<Page title="Your Title">
<content>
    <!-- your panel with calender here -->
</content>
<footer>
    <!-- your footer code here -->
</footer>

</Page>

</mvc:View>

A good code example is here: https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.Page/code

and you can see how it looks like here: https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.Page/code

Upvotes: 0

Related Questions