Home > front end >  .Net MAUI WebView with iFrame - problem with windows height
.Net MAUI WebView with iFrame - problem with windows height

Time:10-03

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.

  • Related