Scroll IconTabBar content with fixed Header

[#1]

Hi Guys, I´m pretty new in the UI5 world and I have the requierment to make a fixed header and icon tab bar so the content can be scrolleable.

Below you can find the code that i'm implementing. My problem is focused on the header, It has to be fixed along with the IconTabBar, if I use the stretchContentHeight="true" property, it makes my header disappear.

Any sugestions about how to resolve this issue?

Thanks in advance.

Chris

<content>
    <!-- Header Data  -->
    <mvc:XMLView viewName="appvision360.view.Header"/>
    <IconTabBar	id="idIconTabBarMulti" headerMode="Inline"
                class="padding sapUiResponsiveContentPadding">
        <items>
            <IconTabFilter icon="sap-icon://customer" key="Customer" 
                           tooltip="Customer" >
                <ScrollContainer height="100%" width="100%"
                                 vertical="true">
                    <!-- Content 1  -->
                    <mvc:XMLView viewName="app.view.content1"/>
                </ScrollContainer>
            </IconTabFilter>
            <IconTabFilter icon="sap-icon://account">
                <ScrollContainer height="100%" width="100%" 
                                 vertical="true">
                    <!-- Content 2  -->
                    <mvc:XMLView viewName="app.view.content2"/>
                </ScrollContainer>
            </IconTabFilter>
        </items>
    </IconTabBar>
</content>

[Former Member]

Hi,

To achieve your requirement, you can also use scrollcontainer inside the icon tab filter, refer below sdk library. Icon Tab Bar - Stretch Content Height

Please mark as answered, if you got the answer for the question.

BR,

Muthu.

[Former Member]

Hi,

Use Object page section in uxap library, it helps for fixed header. Icontabbar doesn't support fixed header i think.

BR,

Muthu.

[Former Member]

Use the following code :

	<IconTabBar
		id="ictb"
		class="sapUiResponsiveContentPadding">
		<items>
			<IconTabFilter
				icon="sap-icon://hint">
				<Text text="Info" />
			</IconTabFilter>
			<IconTabFilter
				icon="sap-icon://attachment"
				count="3">
				<Text text="Attachment" />
			</IconTabFilter>
			<IconTabFilter
				icon="sap-icon://notes"
				count="12">
				<Text text="Notes" />
			</IconTabFilter>
			<IconTabFilter
				icon="sap-icon://group">
				<Text text="Employee" />
			</IconTabFilter>
		</items>
	</IconTabBar>