how to enable vertical scrolling

[former_member76594]

We have an app that is structured with an app.view (as an outer shell) -> Main.view (with header, and navigation property) -> various views rendered inside. Our problem is that we cannot scroll vertically on any of our pages.

We have tried using the property "fitcontainer" on the top-level VBoxes to no avail.

Did notice something in the inspector, but I don't know if it's relevant:

I can only assume that our scrolling issue is due the way we have structured the app.

App.view:

<mvc:View controllerName="en.funnyapp.controller.App" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
	<Shell id="shell" appWidthLimited="false">
		<App id="app">
		</App>
	</Shell>
</mvc:View>

Main.view:

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:tnt="sap.tnt"
	controllerName="en.funnyapp.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml">
	<Page title="Title" showHeader="false">
		<tnt:ToolHeader>
			<Image src="./images/bdknavtoplogo.gif" height="47px"></Image>
			<ToolbarSpacer/>
			<Button text="FORSIDE" type="Transparent" press="onNavigate">
				<customData>
					<core:CustomData value="Home"/>
				</customData>
			</Button>
			<Button text="SERVICEREGISTRERING" type="Transparent" press="onNavigate">
				<customData>
					<core:CustomData value="ServiceRegistration"/>
				</customData>
			</Button>
			<Button text="VEDLIGHOLDELSE" type="Transparent" press="onNavigate">
				<customData>
					<core:CustomData value="Maintenance"/>
				</customData>
			</Button>
			<Button text="RAPPORTERING" type="Transparent" press="onNavigate">
				<customData>
					<core:CustomData value="Reporting"/>
				</customData>
			</Button>
			<Button text="LOG UD" type="Transparent"></Button>
		</tnt:ToolHeader>
		<content>
			<NavContainer id="mainContent"/>
		</content>
	</Page>
</mvc:View>

Randomly picked view:

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:grid="sap.ui.layout.cssgrid"
	controllerName="en.funnyapp.controller.Maintenance" xmlns:html="http://www.w3.org/1999/xhtml">
	<VBox class="sapUiMediumMargin">
		<Title text="Søg efter VH-ordre" titleStyle="H2" class="sapUiTinyMarginBottom"/>
		<HBox class="sapUiMediumMarginBottom">
			<SearchField placeholder="Hvad søger du"/>
			<Button text="Vis" class="sapUiTinyMarginBeginEnd"/>
			<Button text="Ændre"/>
		</HBox>
		<Title text="Aktiv forespørgsel" titleStyle="H4"/>
		<grid:CSSGrid id="grid1" gridTemplateRows="25px 25px 25px 25px" gridTemplateColumns="repeat(6,210px)" gridGap=".1rem"
			class="sapUiLargeMarginBottom">
			<grid:items>
				<VBox>
					<Title text="Ordre - Fejl" wrapping="true" class="sapUiSmallMarginTop"/>
				</VBox>
				<VBox>
					<RadioButton text="Nye de seneste 7 dage(0)"/>
				</VBox>
				<VBox>
					<RadioButton text="Alle nye(3)"/>
				</VBox>
				<VBox>
					<RadioButton text="Under behandling(5)"/>
				</VBox>
				<VBox>
					<RadioButton text="Afsluttet(4)"/>
				</VBox>
				<VBox></VBox>
				<VBox>
					<Title text="Ordre - Norm" wrapping="true" class="sapUiSmallMarginTop"/>
				</VBox>
				<VBox>
					<RadioButton text="Nye(1)"/>
				</VBox>
				<VBox>
					<RadioButton text="Accepteret(2)"/>
				</VBox>
				<VBox>
					<RadioButton text="Afventer(0)"/>
				</VBox>
				<VBox>
					<RadioButton text="Afvist(0)"/>
				</VBox>
				<VBox>
					<RadioButton text="Teknisk afsluttet(1)"/>
				</VBox>
				<VBox>
					<Title text="Ordre - Tilstand" wrapping="true" class="sapUiSmallMarginTop"/>
				</VBox>
				<VBox>
					<RadioButton text="Nye(2)"/>
				</VBox>
				<VBox>
					<RadioButton text="Accepteret(1)"/>
				</VBox>
				<VBox>
					<RadioButton text="Afventer(0)"/>
				</VBox>
				<VBox>
					<RadioButton text="Afvist(0)"/>
				</VBox>
				<VBox>
					<RadioButton text="Teknisk afsluttet(1)"/>
				</VBox>
				<VBox>
					<Title text="Meddelelser - Tilstand" wrapping="true" class="sapUiSmallMarginTop"/>
				</VBox>
				<VBox>
					<RadioButton text="Kladde(3)"/>
				</VBox>
				<VBox>
					<RadioButton text="Sendt til Banedanmark(5)"/>
				</VBox>
				<VBox></VBox>
				<VBox></VBox>
				<VBox></VBox>
			</grid:items>
		</grid:CSSGrid>
		<Toolbar style="Clear">
			<Title text="Ordre - Fejl - Nye de seneste 7 dage(0)" titleStyle="H4"/>
			<ToolbarSpacer/>
			<SearchField placeholder="Søg" width="15rem"/>
			<Button text="Eksporter til excel" class="sapUiTinyMarginEnd"/>
			<Button text="Print"/>
		</Toolbar>
		<Table items="{mockData>/vhList}" itemPress="onItemPress">
			<columns>
				<Column>
					<Label text="Col1"/>
				</Column>
				<Column>
					<Label text="Col2"/>
				</Column>
				<Column>
					<Label text="Col3"/>
				</Column>
				<Column>
					<Label text="Col4"/>
				</Column>
			</columns>
			<items>
				<ColumnListItem type="Navigation">
					<cells>
						<Text text="{mockData>col1}"/>
						<Text text="{mockData>col2}"/>
						<Text text="{mockData>col3}"/>
						<Text text="{mockData>col4}"/>
					</cells>
				</ColumnListItem>
			</items>
		</Table>
	</VBox>
</mvc:View>

Screenshot of the view zoom 100%:

Same view zoomed way out:

Any ideas/input is highly appreciated. Thanks.

[former_member76594 · Accepted solution]

Managed to figure it out.

When using a navcontainer, all views displayed inside the navcontainer should use the <Page> control as the outermost control.

[Florian]

Hi Kenneth,

you may have a look at this site:

https://sapui5.hana.ondemand.com/#/api

there you will find the options you need. Don't think that it is of the structure. Would suggest that there is just an option missing. but with your random view I'm not able to dig deeper atm.

~Florian

[former_member76594]

Thanks Florian.

I have looked through the documentation, again now, and I just cannot see what causes this issue.