Master/Detail+ObjectHeader+IconTabBar: How to Scroll only IconTab content?

[Former Member]

Hi,

I have a master/detail application .

the detail page consists of an ObjectHeader and an IconTabBar with several Tabs.

I want especially the IconTabBar to be always visible and have scrolling only on the IconTab content. How do I achieve this best?

Regards,

[vedaradhya]

Hi Ramji,

If you want IconTabBar always expanded, their is a property in IconTabBar Control expandable="false" , next one

you can use panel and scrollcontainer inside IconTabFilter to enable scrolling the content of IconTabBar.

for example:

<semantic:DetailPage title="detailTite">
	<semantic:content>
		<ObjectHeader id="objectHeader" title="{ContactName}"></ObjectHeader>
		<IconTabBar id="iconTabBar" class="sapUiResponsiveContentPadding" expandable="false">
			<items>
		 	    <IconTabFilter id="iconTabBarFilter1" icon="sap-icon://hint">
				<Panel height="200px">
				     <ScrollContainer>
                                          <!--content code here-->
				     </ScrollContainer>
                                </Panel>
			     </IconTabFilter>
				
                            <IconTabFilter id="iconTabBarFilter2" >
                               <Panel height="200px">
				     <ScrollContainer>
                                          <!--content code here-->
				     </ScrollContainer>
                                </Panel>
                            </IconTabFilter>
			</items>
		</IconTabBar>
	</semantic:content>
</semantic:DetailPage>
  

Note: Instead of using Panel and ScrollContainer you can also handle this by setting height to IconTabBarContent using your own custom css.

Regards,

Vedaradhya.