Skip to Content

Scroll only content of IconTabBar keeping top bar fixed

Hello All,

I am using an IconTabBar control. When content exceeds the page size, a scroll bar appears. But the the IconTabBar also scrolls along with its content.

I want the top bar to remain fixed and only the content to be scrolled.

I read the below point in release of SAPUI5 1.26

stretchContentHeight can be used together with the new FixFlex layout control to create pages where the IconTabBar does not scroll together with its content and the content fills the remaining space below the IconTabBar

Can someone provide a small example of it?

How do I get content of IconTabBar scroll keeping the bar fixed?

Thanks,

Twinkle

Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

1 Answer

  • Best Answer
    author's profile photo Former Member
    Former Member
    Posted on Dec 11, 2015 at 04:12 AM

    Just had the same question myself. Turns out that it's actually quite easy to implement. Example/demo at: https://sapui5.netweaver.ondemand.com/sdk/explored.html#/sample/sap.m.sample.IconTabBarStretchContent/preview

    Basically I needed to do two things in my app to make this work:

    1. Add stretchContentHeight="true" to IconTabBar.
    2. Wrap my IconTabFilter content in a ScrollContainer:
      1. <ScrollContainer
        height="100%"
        width="100%"
        horizontal="false"
        vertical="true">
    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.