I am implementing a WebView with a link to a very long page. In this long page there is a menu that is activated from the menu in the top. As a normal webpage, this bottom menu opens in the bottom of the window, but in the app, I have to scroll to the bottom of the page to see it. How can I make this display on the bottom of the screen instead of the bottom of the page? This is the code:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Xyz.MainPage">
<Grid ColumnDefinitions="*"
ColumnSpacing="0"
RowDefinitions="*"
RowSpacing="0">
<ScrollView>
<VerticalStackLayout
Spacing="0"
Padding="0"
VerticalOptions="Center">
<WebView Source="https://files.xyz.net/index.html"
HorizontalOptions="CenterAndExpand"
VerticalOptions="FillAndExpand">
</WebView>
</VerticalStackLayout>
</ScrollView>
</Grid>
The HTML page
<html>
<head>
<style>
html,body {height:100%}
#one2go {
width: 100% !important
}
</style>
</head>
<body style="margin:0px;padding:0px;overflow:hidden">
<script src="test.js" data-formtarget="_self" data-xyz="357278" data-color="blue" data-language="en" data-width="250" data-height="251" data-border="1" data-hidelogo="1" data-domain="xyz.asia"></script>
</body>
</html>
CodePudding user response:
If I understand your problem correctly, you can simply put it in a StackLayout instead of a Grid/ScrollView, like this:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage ...>
<StackLayout
VerticalOptions="Fill"
HorizontalOptions="Fill">
<WebView
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"/>
</StackLayout>
</ContentPage>
Please note that the VerticalOptions/HorizontalOptions are important. This will make the WebView the only thing on the page.