Skip to Content
-1
Jul 08, 2019 at 10:17 AM

how to enable vertical scrolling

579 Views

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.