SAP UI5 Page Footer is not displaying

[MKM]

Hi Experts,

I have my custom Fiori application which has multiple views nested among each other.

It has a Main View which is calling another 5 views kept in separe IconTabFilters of a IconTabBar. From one of the tab, it is calling "SR_CreateRequest" View. It has a ScrollContainer showing a Table, 2 Panels and then the footer.

The issue is, it is not showing the footer at all. Strangely when I am going to inspect the page id in Chrome debugger, it is appearing automatically.

I have tried with different CSS styles. But not working out.

Awaiting for a quick help.

Thanks in advance,

Manoj

[MKM]

Hi All,

I have tried with above options, But no luck.

When I am jumping to debugger tool and selecting page id, automatically it is appearing.

Thanks,

Manoj

[maheshpalavalli]

The easiest way for you to get a quick solution for your issue is to replicate in open tools like Plunker

https://next.plnkr.co/edit/LfnUrISqxBpOmuKe?preview

So it will be easier for others to analyze ur issue

[boghyon · Accepted solution]

Remove <App> from all sub views.

<!-- Not a root view -->
<mvc:View xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  height="100%"
>
  <!-- <App> removed -->
  <Page showFooter="true">
    <!-- ... -->
  </Page>
  <!-- </App> removed -->
</mvc:View>

By design, sap.m.App, sap.m.SplitApp, and sap.m.Shell are meant to be used only once in the entire application frame. They push their parent elements 100% in height. Due to the App having 100% height of its own container despite having a sibling control or an existing sap.m.(Split)App ancestor, the remaining content (e.g. footer) gets pushed out of the viewport which also creates an additional vertical scrollbar.

Related comment by andreas.kunz on GitHub: https://github.com/SAP/openui5/pull/1290#issuecomment-300471493

Since UI5 1.91, <App isTopLevel="false"> can be also used instead of removing or replacing it with <NavContainer>.

___

Additionally, depending on the layout, the setStretchContentHeight should be set to true in IconTabBar if the content is not stretched. Please note that the height of the container should be also explicitly set to a value other than auto. For example:

<mvc:View xmlns:mvc="sap.ui.core.mvc" height="100%">
  <IconTabBar xmlns="sap.m" stretchContentHeight="true">
    <!-- ... -->

[MKM · Accepted solution]

Hi Boghyon,

Now the footer is appearing on top of page.

Anything more, i am missing.

Thanks,

Manoj

[boghyon · Accepted solution]

Hi manoj.mohanty

It's hard to identify the cause by just looking at the screenshot. At the first glance, I'd say there are custom CSS styles that might be causing this issue.

Otherwise, please try to create an mcve by forking this plunk: https://next.plnkr.co/edit/16J1TFICxbqETCzaxuZ0 (Click on "Fork", edit + save it, and share the URL here).

[MKM · Accepted solution]

Hi Boghyon,

I have updated the project with the list of views required to populate the issue. But struggling to run it is plnkr.

https://next.plnkr.co/edit/vqGf9FL7JguSeFTi

Use can use the above url to check it.

App View - Dummy View

Main View - Root View. It is calling "Home" and "SR_Request" views.

SR_Request View - It is calling "SR_MyTasks" and "SR_CreateRequest" views.

The issue lies in the SR_CreateRequest View.

Thanks in advance,

Manoj

[boghyon · Accepted solution]

Hi manoj.mohanty

Thanks for the plunk. Here is a working example: https://next.plnkr.co/edit/1v2aQHkJVSHGCeEM

The main issue was that the two IconTabBars were missing stretchContentHeight="true" (Updated the original answer accordingly).

With the single <App> and stretchContentHeight="true" in IconTabBars, the footer should be visible in the bottom as shown in the demo.

[MKM · Accepted solution]

Hi Boghyon,

Even after using stretchContentHeight for IconTabBars, it is appering on the top.

[boghyon · Accepted solution]

manoj.mohanty

Ok, one last thing to add: when embedding another view, add height="100%" or add it in the view definition itself (as shown in the demo). For example, in SR_Request.view.xml:

<IconTabFilter text="Create SR Request">
  <mvc:XMLView viewName="demo.view.SR_CreateRequest" height="100%" async="true" />
</IconTabFilter>

Without this, stretchContentHeight won't have any effect.

[MKM · Accepted solution]

No luck Boghyon 😟

[boghyon · Accepted solution]

manoj.mohanty indicates that there are some custom CSS styles applied. If that's true, please try to include them to the fork as well.

Another question: with which UI5 version is the app running? You can check the version by pressing [Ctrl] + [Left Alt] + [Shift] + [P].

[MKM · Accepted solution]

Finally I found the issue. It was due to the css.

Thanks Boghyon for your time investigating the issue.

[alrebhzahra · Accepted solution]

Thanks a lot.

[former_member190655]

Start by reducing scroll container height property and if that doesn't have any effect remove the page properties - enable scrolling, floating footer etc. And start adjusting based on your requirements. Also, remove the "Overflow Toolbar" - keep the button inside a standard footer first, once it all starts working then start using the overflow functionality.

From screenshot above, it looks like you have too many scrolls running crazy everywhere.

[Kindly, vote up or like, if the comment helps you]

Chet

[MKM]

No effects Chetanya.

[devendervb]

Can you check with setting floatingFooter="false".

[MKM]

No Devender. it has no effect.

[wailoon_koo]

Hi manoj.mohanty ,

I see that in your code the Page has property showHeader but not showFooter. Try add it and see if it shows.

https://sapui5.hana.ondemand.com/#/api/sap.m.Page%23controlProperties

[MKM]

No Wai. not working.