Share via

Webview is not allowing the remaining UI elements to render properly

Keerthana Krishna 60 Reputation points
2024-05-07T09:31:52.57+00:00

I have labels, images and button along with webview. When I am landing to this webview page, the remaining UI controls are not rendered(not shown in the UI). When I start scrolling then the UI elements are rendered properly like in attached screenshots. I tried even adding height request and width request, even then it did not work. Do I need to add anything else.

User's image User's image

The first screenshot refers when I landed to that page. The second screenshot refers to when I scrolled the webview then the image, labels started rendering in UI.

Thanks

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,586 questions
XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
814 questions
0 comments
Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 76,471 Reputation points Microsoft Vendor
    2024-05-08T03:01:25.79+00:00

    Hello,

    Please add <ScrollView> outside the webview, then other controls will render normally like following code.

    
<ScrollView>
     <VerticalStackLayout
         Padding="30,0"
         Spacing="25">
         <Image
             x:Name="muImage"
             Source="dotnet_bot.png"
             HeightRequest="185"
             Aspect="AspectFit"
             SemanticProperties.Description="dot net bot in a race car number eight" />


         <Label
             Text="Hello, World!"
             Style="{StaticResource Headline}"
             SemanticProperties.HeadingLevel="Level1" />


         <Label
             Text="Welcome to &#10;.NET Multi-platform App UI"
             Style="{StaticResource SubHeadline}"
             SemanticProperties.HeadingLevel="Level2"
             SemanticProperties.Description="Welcome to dot net Multi platform App U I" />


         <ScrollView>
             <WebView x:Name="webView" >
                 <WebView.Source>
                     <HtmlWebViewSource>
                         <HtmlWebViewSource.Html>
                             <![CDATA[
      <html>
      <head>
      </head>
      <body>
      <h1>.NET MAUI</h1>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      <p>The CSS and image are loaded from local files!</p>
      </body>
      </html>                    
      ]]>
                         </HtmlWebViewSource.Html>
                     </HtmlWebViewSource>
                 </WebView.Source>


             </WebView>
         </ScrollView>
    
         <Button
             x:Name="CounterBtn"
             Text="Click me" 
             SemanticProperties.Hint="Counts the number of times you click"
             Clicked="OnCounterClicked"
             HorizontalOptions="Fill" />
     </VerticalStackLayout>

</ScrollView>

    I find this issue only happened when you use HtmlWebViewSource, if you use url source, webview could show normally. You can report this issue in the MAUI GitHub repo as well.

    Best Regards,

    Leon Lu

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.