Skip to Content
0

Scroll IconTabBar content with fixed Header

Oct 02, 2017 at 06:47 PM

48

avatar image
Former Member

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>
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Arjun Biswas Oct 05, 2017 at 05:11 AM
0

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>
Share
10 |10000 characters needed characters left characters exceeded