Accompanist WebView not filling its max size at launch and not scrolling

Question

I'm using the accompanist webview for compose, and when loading the url I need, at launch, the webpage adjusts its size to fit in less than half screen. The website that I need to load works well on Google chrome and in other browsers.

Edit: Here's the entire home screen code, where the webview is:

....
@SuppressLint("SetJavaScriptEnabled")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun HomeScreen(
    goToSettingsScreen: () -> Unit,
    viewModel: HomeViewModel = hiltViewModel()
) {
    val state = viewModel.state

    val preferences = runBlocking { viewModel.userPreferences.first() }

    val webViewState = rememberWebViewState(url = preferences.url)
    //val scrollState = rememberScrollState()

    val mContext = LocalContext.current
    //Log.i("prefval", preferences.url)

    Scaffold(
        topBar = {
            CustomTopAppBar(
                toggleMenu = { viewModel.toggleDropdownMenu() },
                isMenuOpen = state.value.isHomeDropdownMenuOpen,
                goToSettingsScreen = {
                    goToSettingsScreen()
                    viewModel.toggleDropdownMenu()
                }
            )
        }
    ) { paddingValues ->

        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(top = paddingValues.calculateTopPadding())
                //.verticalScroll(scrollState)
        ) {
            WebView(
                state = webViewState,
                modifier = Modifier
                    .fillMaxSize(),
                onCreated = {
                    it.settings.javaScriptEnabled = true
                    it.settings.allowFileAccess = true
                    it.fitsSystemWindows = true
                    it.setDownloadListener(
                        object : DownloadListener {
                            override fun onDownloadStart(
                                url: String?,
                                userAgent: String?,
                                contentDisposition: String?,
                                mimetype: String?,
                                contentLength: Long
                            ) {
                                val request: DownloadManager.Request =
                                    DownloadManager.Request(Uri.parse(url))
                                request.apply {
                                    setMimeType(mimetype)
                                    setDescription("Downloading file")
                                    addRequestHeader("UserAgent", userAgent)
                                    setTitle(
                                        URLUtil.guessFileName(
                                            url,
                                            contentDisposition,
                                            mimetype
                                        )
                                    )
                                    setNotificationVisibility(
                                        DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED
                                    )
                                }
                                val downloadManager = mContext.getSystemService(
                                    Context.DOWNLOAD_SERVICE
                                ) as DownloadManager?
                                downloadManager?.enqueue(request)
                                Toast.makeText(mContext, "Downloading file", Toast.LENGTH_LONG)
                                    .show()
                            }
                        }
                    )
                }
            )
        }
    }
}
....

Here are some screenshots:

This one shows the app at launch. As you can see it's not fitting the entire screen.

Here, I triggered a login error (the yellow box), and the page adjusts its size, but not enough to fill the screen.

And here I triggered another error message (bigger yellow box), and the page finishes adjusting its size. Also I tried to scroll, in order to see the error message (you can see the scroll bar appearing on the right side of the webview), but nothing happened.

Before using the accompanist webview, I tried to use the original one. Basically the code is almost the same but the webView is inside the AndroidView composable. I was having the same problems, with the difference that at launch, the webpage fitted the screen, until I tried to add the vertical scroll modifier (I think that this is not needed, but I couldn´t scroll...). It fixed the scroll, but ended up having the same problems I mentioned earlier (the webpage not fitting the entire screen at launch).

Answer 1

You need to set the srcoll state.

WebView(
    modifier = Modifier
        .fillMaxSize()
        .verticalScroll(rememberScrollState()),
    state = webViewState,
    captureBackPresses = true,
    onCreated = { it: WebView ->
        it.settings.javaScriptEnabled = true
    }
)

Answer 2

Use:

WebView(
                        state = webViewState,
                        captureBackPresses = true,
                        layoutParams = FrameLayout.LayoutParams(
                            ViewGroup.LayoutParams.MATCH_PARENT,
                            ViewGroup.LayoutParams.MATCH_PARENT
                        ),
                        onCreated = { it: WebView ->
                            it.settings.javaScriptEnabled = true

                        }
                    )

Answer 3

Could you try using the below code in your AndroidView? The trick is setting layoutParams.

AndroidView(factory = {
    WebView(it).apply {
        layoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )
})