The Android WebView experiencing issues with the functionality of the Hamburger Menu

I'm facing an unusual issue with the Android WebView in my app. The hamburger menu on my website works perfectly fine on my mobile browser, but when I try to open it in the Android WebView, it does not fully expand to show the menu items.

I have tried implementing various solutions found on StackOverflow, including:

        webView.getSettings().setDomStorageEnabled(true);
        webView.getSettings().setJavaScriptEnabled(true);
        settings.setJavaScriptEnabled(true);
        webView.getSettings().setLoadWithOverviewMode(true);
        webView.getSettings().setUseWideViewPort(true);

Proper functionality in Mobile Browser:

https://i.sstatic.net/7Ci8t.png

Issue in Android WebView App:

https://i.sstatic.net/yZIXR.jpg

Here is the code for my Android WebView App:

package com.app.pvm;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.MyWebView);

        webView.setWebChromeClient(new MyChromeClient());
        webView.setWebViewClient(new BrowserClient());

        WebSettings settings = webView.getSettings();
        webView.getSettings().setDomStorageEnabled(true);
        webView.getSettings().setJavaScriptEnabled(true);
        settings.setJavaScriptEnabled(true);
        settings.setAllowFileAccess(true);

        webView.getSettings().setLoadWithOverviewMode(true);
        webView.getSettings().setUseWideViewPort(true);

        webView.loadUrl("https://test.app");
    }
}

XML Code:

<?xml version="1.0" encoding="utf-8"?gt;
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/MyWebView"/>
</LinearLayout>

BrowserClient Class code:

package com.app.pvm;

import android.graphics.Bitmap;
import android.webkit.WebResourceError;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;

class BrowserClient extends WebViewClient {

    public BrowserClient(){

    }

    @Override
    public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
        super.onReceivedError(view, request, error);
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
    }


}

Note: This Android WebView App has been developed using Android Studio.

Answer №1

For your WebView to fill the entire window, you should use match_parent

<WebView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/MyWebView"/>

Setting wrap_content for height can cause the inner dropdown to be improperly sized. Instead, setting the whole web content stretches the WebView to match the size of its parent (LinearLayout) and makes it scrollable.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

MUI: Set the height of the div element to dynamically expand based on its content

I am currently working on styling a React app with MUI and I need help figuring out how to make a div's height adjust to its content. Specifically, I have a Card component that contains a Button. Upon clicking the Button, the content below the Card ge ...

Developing an Android application that retrieves a JSON array from a web source and displays it

I am currently working on retrieving a simple JSON array in the format: ["Country1","Country2","Country3"] from a web source and incorporating it into a listview within my Android application. While I have managed to generate the JSON array, I am facing ch ...

Dynamic Hero Banner

As I work on creating a basic website for my football team, I am facing an issue with the text placement in different screen sizes. While the Jumbotron background image resizes perfectly according to the screen size, the text outside of the Jumbotron doesn ...

Can JavaScript trigger an alert based on a CSS value?

Hello, I am facing an issue. I have created a blue box using HTML/CSS and now I want to use JavaScript to display an alert with the name of the color when the box is clicked. Below is my code: var clr = document.getElementById("box").style.background ...

Steps to transform a floating action button into a full-screen form

Within my application, there is a Floating Action Button (FAB) that I would like to utilize for creating custom events. The specific animation I am aiming for is the "Full Screen" transition mentioned in the material design guidelines, which can be found a ...

Issues with Css custom properties on certain webhosting platforms

Seeking assistance with a CSS custom properties issue. Recently purchased a web hosting service from Hostinger and using the default Wordpress template. Our web designer created a website in teleporthq.io, exported the files as HTML and CSS. Deleted the ...

Using CSS backdrop-filter to create a unique blurred border effect for your web elements

In my quest for achieving unique visual effects, I have been experimenting with the backdrop-filter and element borders. While it is easy to create an element that blurs its background, I am facing challenges in making the filter affect only the border are ...

"Bootstrap is functioning properly on my local environment, but it seems to

Utilizing the MVC framework and bootstrap has been successful for optimizing my website locally. However, when I upload it to the server, none of the CSS is being rendered. Additionally, the front page, meant to be a carousel slider, appears as a vertical ...

"Implementing a seamless transition effect on two slideshows using jQuery's fadeslideshow

I currently have a homepage featuring a fadeslideshow with 5 slides. The fadeslideshow plugin being used can be found at http://plugins.jquery.com/project/fadeslideshow. On the homepage, there is also a menu bar with various menu items. When a user clicks ...

The Chip Component in MUI dynamically alters its background color when it is selected

Currently, I am working on a project in React where I am utilizing the MUI's Chip component. My goal is to customize this component so that it changes its background color when selected, instead of sticking to the default generic color. https://i.sta ...

delete local ios css style datetime input

I am facing an issue with the new ios 16 version in Safari where input time and input datetime are being displayed incorrectly. Is there a way to fix this problem? I have tried using -webkit-appearance: none; but it did not work. https://i.sstatic.net/em ...

Picture failed to load

I am struggling to get an image to display on my webpage, as only the alt text is appearing. Here is the code I am using: return ( <> <div className="container my-5"> <div className="row ju ...

Why doesn't the link to CSS work when placed outside the HTML folder with Gulp-webserver?

When utilizing a html file that links to a css file in the same folder or a subfolder, the css is successfully included when running gulp webserver. However, if the css file is located outside of the html-folder, it fails to be included. For instance, if ...

Close the Bootstrap Modal by clicking the back button within SweetAlert

**How can I close a Bootstrap modal when clicking the back button in SweetAlert? I have tried using modal.hide() but it's not working. I am using Bootstrap version 5 and even checked their documentation with no luck. Does anyone know how to achieve th ...

Can you explain the distinction between activity and intent within the realm of Android development?

I'm curious to understand the distinction between an "Activity" and an "Intent" within the realm of the Android platform. Can someone shed some light on this for me? ...

I am having issues with Tailwind CSS overriding the responsive padding on my website

I'm currently working on implementing responsive padding for a component. Given that Tailwind CSS follows a mobile-first approach, I have set the mobile padding to p-3, while screens at "md" and larger widths should use p-5. However, it seems like the ...

Styling Lists: How to Create a Second Line Indent with Counters

There seems to be an issue with the second line indent when using a custom counter. When attempting to use 'list-style-type: decimal', the numbering does not display as desired, for example: ol { counter-reset: ci-counter; list-style- ...

Managing the search button functionality on the android virtual keyboard in a cordova application

How can I handle the search button on the Android keyboard to initiate a search when pressed within a search field? I have successfully managed to handle the back button and volume down button, but for some reason, the search button on the keyboard does ...

The vertical tabs in JQueryUI lost their functionality when a few seemingly unrelated CSS styles were added

Check out the JsFiddle demo here I embarked on a mission to craft JQueryUI Vertical tabs by following the guidance provided in this example. The source code within the aforementioned link contains specific CSS styles: .ui-tabs-vertical { width: 55em; } ...

What could be causing my linear background to behave in this unusual manner?

Just when I thought styling my background with a simple line of code would be easy, I encountered an unexpected issue. Instead of a smooth linear-gradient from the top left to the bottom right, my background is showing rows of red and blue in between each ...