webview_flutter can't hide/change some elements

Question

Using the webview_flutter with evaluateJavascript(), I've been able to modify the style of most elements of my website, but can't understand why some elements don't get modified.

My WebView is included, and the website to display within the WebView is https://dme.com.sg/index.php?dispatch=auth.login_form

I've included a snapshot as well, showing how I can hide and modify the colours for most of the elements, yet it seems all those that are within the "form" cannot be changed.

Would appreciate any help on how I can modify those as well, especially to change their colours to a darker theme to match the colours of the app.

WebView(
      initialUrl: 'https://dme.com.sg/index.php?dispatch=auth.login_form',
      javascriptMode: JavascriptMode.unrestricted,
      onWebViewCreated: (controller) {
        _controller = controller;
      },
      onPageStarted: (url) {
        _controller.evaluateJavascript(
            "document.getElementsByClassName('tygh-top-panel clearfix')[0].style.display='none';"
                "document.getElementsByClassName('tygh-header clearfix')[0].style.display='none';"
                "document.getElementsByClassName('tygh-header')[0].style.display='none';"
                "document.getElementsByClassName('tygh-footer')[0].style.display='none';"
                "document.getElementsByClassName('auth-information-grid')[0].style.display='none';"
                "document.getElementsByClassName('ty-breadcrumbs clearfix')[0].style.display = 'none';"
                "document.getElementsByClassName('container-fluid  content-grid')[0].style.background = 'black';"
                "document.getElementsByClassName('ty-mainbox-title')[0].style.color = 'pink';"
                "document.getElementsByClassName('buttons-container clearfix')[0].style.display = 'none';"
        );
      },
    ),

Damien Devillian · Answer 1 · 2021-10-24T20:47:53.173

Have kept tinkering around with it, and looking up JavaScript tutorial, and I managed to find a solution. So I'm not sure HOW or WHY, so still hoping someone could comment a response that explains so I can better understand.

Something else I've learnt, it's easier to just use the "console" tab of chrome to test the java scripts on the page before moving it into flutter webview.

Using the "document.getElementsByClassName("buttons-container clearfix")" command, I got a list of where the class was being used, and found the one I wanted to change was 1. It helps that when as you type the right index number, it gets highlighted on the website.

So then using "document.getElementsByClassName("buttons-container clearfix")1.style.background = 'black'" I managed to change the style of the element I wanted.

I've included a screengrab of the chrome console here if it can help anyone else.

webview_flutter can't hide/change some elements

1 Answers1