SAPUI5 Page Footer doesn't show in correct place

Question

I have a problem regarding the design of the page. I can't make the header and footer look correctly in all resolutions. I have one main App view which handles routing and places the required view to the content.

<mvc:View xmlns:mvc="sap.ui.core.mvc"   xmlns="sap.m" heigh="100%" displayBlock="true"
      controllerName="demo_pcm.App" >

<Page id="productListPage" navButtonPress="onNavBack" showNavButton="true" title="{i18n>products}">
    <headerContent>
<IconTabBar
        expanded="false"
        id="idIconTabBar"
        select="handleIconTabBarSelect"
        expandable="false"
        applyContentPadding="false"
        headerMode="Inline"
        visible="{viewModel>/visible}"
       >
    <items>
        <IconTabFilter

                icon="sap-icon://begin"
                iconColor="Neutral"
                design="Horizontal"
                text="STEP1"
                key="STEP1" />
        <IconTabSeparator icon="sap-icon://open-command-field" />
        <IconTabFilter
                icon="sap-icon://survey"
                iconColor="Neutral"
                design="Horizontal"
                text="STEP2"
                key="STEP2"
        />


    </items>
</IconTabBar></headerContent>

    <content >
<App id="app" >
    <!-- pages will be filled automatically via routing -->
</App>
    </content>
</Page>

Based on the URL, i am inserting other views to the app itself. Here my design problem comes.If i use header content and place the icontabbar there (this icontabbar should repeat on each subview that is why i placed inside the app.view) Here how it looks; header cannot be seen clearly

if i just remove the page control or don't use in the app.view and just place the icontab bar itself right above to control, it works fine. I want my icontabbar to stick header always that is why i tried to include in the header content. Another problem is with the footer. After i load my first first view from the router , i can't see my footer if i don't scroll down. I need to scroll down to see or set the view height to 90%. That is how it looks; missing footer

in the image you will see another scrollbar on the right, it is due to page vibration (Somehow it was shaking in chrome and i put below code to the css)

html{ overflow-y: scroll;}

from the app.view if i insert scroll container and set the height to 90%, it works fine but it goes higher position on higher resolutions.(so in a 4k resolution it looks very weird)

  <ScrollContainer
        height="90%"
        width="100%"
        horizontal="false"
        vertical="true">
<App id="app" >
    <!-- pages will be filled automatically via routing -->
</App>
</ScrollContainer>

and here is how it looks now (without in app.view and scroll container with height 90% (footer can be seen but you can see white line at the bottom, it becomes bigger on higher resolutions) (stackoverflow doesn't allow me to post 3 links :/)

Here is my index.html

 <script>
    sap.ui.localResources("demo_pcm");
    sap.ui.localResources("util");
    sap.ui.localResources("i18n");
    var oModel = "";
    sap.ui.getCore().attachInit(function() {
        sap.ui.require([
            "sap/m/Shell",
            "sap/ui/core/ComponentContainer",
            "demo_pcm/Component"
        ], function(Shell, ComponentContainer, Component) {

                app: new ComponentContainer({
                    height:"100%",
                    component: new Component({
                        id: "mvcAppComponent"
                    })
                }).placeAt("content");
        }); });



</script>

where can be the problem ? I am very near to loosing my mind. I tried floating footer but same problem. Should i include my scroll container in the subview itself before the footer ?

Stephen S Stephen S · Accepted Answer · 2017-04-19T06:30:44

If you are open to some CSS workaround, here's a quick fix: The Toolbar seems to have a fixed height of around 125px(including the padding) across different resolutions. You could set the height of the App container accordingly with this.

XML

<App id="app" class="adjustedHeight">

CSS

.adjustedHeight{
    height: calc(100% - 125px) !important;
}

Note: This is not the best solution. If I find a better one, I will update this answer

SAPUI5 Page Footer doesn't show in correct place

1 Answers