Android: WebView displaying blank page when html string contains <style> tag
I need to present a dialog with html content, and for that I'm using an AlertDialog.Builder to create a dialog based on a custom view which includes a WebView.
The WebView renders correctly inside the dialog as long as the html string does not contain a style tag, case in which, for an unknown for me reason, you will only see an empty WebView.
showDialog:
fun showDialog(message: String) {
val inflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
val dialog = inflater.inflate(R.layout.customdialog_layout_knowmylevel, null)
val webView = dialog.findViewById<WebView>(R.id.webview_dialog_text)
(webView.parent as LinearLayout).removeAllViews()
val settings = webView.settings
settings.javaScriptEnabled = true
//webView.loadData(message, "text/html; charset=UTF-8",null) => OPTION 1
webView.loadDataWithBaseURL("", message,"text/html","utf-8","") //=> OPTION 2
//webView.measure(100, 100) => TESTING (NOT WORKING)
//settings.useWideViewPort = true => TESTING (NOT WORKING)
//settings.loadWithOverviewMode = true => TESTING (NOT WORKING)
val alertDialog: Dialog = AlertDialog.Builder(tm.context)
.setTitle("My Report")
.setView(webView)
.setPositiveButton("Close"
) { _, _ -> dismiss() }.create()
alertDialog.show()
}
customdialog_layout_knowmylevel:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/dialog_container"
android:orientation="vertical"
tools:ignore="SelectableText" >
<TextView
android:id="@+id/textview_dialog_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical|start"
android:padding="10sp"
android:textColor="#FFFFFF"
android:textSize="18sp" />
<WebView
android:id="@+id/webview_dialog_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:alwaysDrawnWithCache="false" />
<LinearLayout
android:id="@+id/tablelayout_dialog_buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<Button
android:id="@+id/button_dialog_yes"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_weight="1" />
<Button
android:id="@+id/button_dialog_no"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
Message for the dialog (no <style>):
val message = "<!DOCTYPE html>" +
"<html>" +
"<head>" +
"</head>" +
"<body>" +
" <h1>Math Test Evaluation Report</h1>" +
" " +
" <h2>1. Summary of Scores</h2>" +
" <table>" +
" <tr>" +
" <th>Test</th>" +
" <th>Score</th>" +
" </tr>" +
" <tr>" +
" <td>SAT Math Level 1 Test 1</td>" +
" <td>Various Scores</td>" +
" </tr>" +
" <tr>" +
" <td>SAT Math Level 1 Test 2</td>" +
" <td>40, 0, 0, 0</td>" +
" </tr>" +
" <tr>" +
" <td>SAT Math Level 2 Test 1</td>" +
" <td>0, 20, 0, 0, 0, 0</td>" +
" </tr>" +
" <tr>" +
" <td>SAT Math Level 3 Test 1</td>" +
" <td>0, 0</td>" +
" </tr>" +
" </table>" +
" " +
" <h2>2. Statistical Analysis</h2>" +
" <p>[Statistical Analysis Here]</p>" +
" " +
" <h2>3. Score Analysis</h2>" +
" <p>[Score Analysis Here]</p>" +
" " +
" <h2>4. Interpretation of Results</h2>" +
" <p>[Interpretation of Results Here]</p>" +
" " +
" <h2>5. Evaluation of Performance</h2>" +
" <p>[Evaluation of Performance Here]</p>" +
" " +
" <h2>6. Strengths</h2>" +
" <p>[Strengths Here]</p>" +
" " +
" <h2>7. Areas for Improvement</h2>" +
" <p>[Areas for Improvement Here]</p>" +
" " +
" <h2>8. Recommendations</h2>" +
" <p>[Recommendations Here]</p>" +
" " +
" <h2>9. Conclusion</h2>" +
" <p>[Conclusion Here]</p>" +
" " +
" <div class=\"chart-container\">" +
" <!-- Include Charts Here -->" +
" <h2>Test Scores Chart</h2>" +
" <img class=\"center-fit\" src=\"https://quickchart.io/chart?c={type:'bar',data:{labels:['Test 1', 'Test 2', 'Test 3'],datasets:[{label:'Scores',data:[75, 30, 10]}]}}\">" +
" </div>" +
"</body>" +
"</html>"
Result:
Message for the dialog (with <style>):
val response = "<!DOCTYPE html>" +
"<html>" +
"<head>" +
" <style>\n" +
" * {\n" +
" margin: 0;\n" +
" padding: 0;\n" +
" }\n" +
" .imgbox {\n" +
" display: grid;\n" +
" height: 100%;\n" +
" }\n" +
" .center-fit {\n" +
" max-width: 100%;\n" +
" max-height: 100vh;\n" +
" margin: auto;\n" +
" }\n" +
" </style>"
"</head>" +
"<body>" +
" <h1>Math Test Evaluation Report</h1>" +
" " +
" <h2>1. Summary of Scores</h2>" +
" <table>" +
" <tr>" +
" <th>Test</th>" +
" <th>Score</th>" +
" </tr>" +
" <tr>" +
" <td>SAT Math Level 1 Test 1</td>" +
" <td>Various Scores</td>" +
" </tr>" +
" <tr>" +
" <td>SAT Math Level 1 Test 2</td>" +
" <td>40, 0, 0, 0</td>" +
" </tr>" +
" <tr>" +
" <td>SAT Math Level 2 Test 1</td>" +
" <td>0, 20, 0, 0, 0, 0</td>" +
" </tr>" +
" <tr>" +
" <td>SAT Math Level 3 Test 1</td>" +
" <td>0, 0</td>" +
" </tr>" +
" </table>" +
" " +
" <h2>2. Statistical Analysis</h2>" +
" <p>[Statistical Analysis Here]</p>" +
" " +
" <h2>3. Score Analysis</h2>" +
" <p>[Score Analysis Here]</p>" +
" " +
" <h2>4. Interpretation of Results</h2>" +
" <p>[Interpretation of Results Here]</p>" +
" " +
" <h2>5. Evaluation of Performance</h2>" +
" <p>[Evaluation of Performance Here]</p>" +
" " +
" <h2>6. Strengths</h2>" +
" <p>[Strengths Here]</p>" +
" " +
" <h2>7. Areas for Improvement</h2>" +
" <p>[Areas for Improvement Here]</p>" +
" " +
" <h2>8. Recommendations</h2>" +
" <p>[Recommendations Here]</p>" +
" " +
" <h2>9. Conclusion</h2>" +
" <p>[Conclusion Here]</p>" +
" " +
" <div class=\"chart-container\">" +
" <!-- Include Charts Here -->" +
" <h2>Test Scores Chart</h2>" +
" <img class=\"center-fit\" src=\"https://quickchart.io/chart?c={type:'bar',data:{labels:['Test 1', 'Test 2', 'Test 3'],datasets:[{label:'Scores',data:[75, 30, 10]}]}}\">" +
" </div>" +
"</body>" +
"</html>"
Result:
I've checked android webview displaying blank page
and https://github.com/beeware/toga/issues/2242
to no avail, because my WebView keeps rendering a blank page if I add a style tag to the html string.
What can I try next?
Solution
add Plus After </style> Tag finish
val response = "<!DOCTYPE html>" +
"<html>" +
"<head>" +
" <style>\n" +
" * {\n" +
" margin: 0;\n" +
" padding: 0;\n" +
" }\n" +
" .imgbox {\n" +
" display: grid;\n" +
" height: 100%;\n" +
" }\n" +
" .center-fit {\n" +
" max-width: 100%;\n" +
" max-height: 100vh;\n" +
" margin: auto;\n" +
" }\n" +
" </style>" + <<-- add Plus after style Tag finish
"</head>" +
"<body>" +
" <h1>Math Test Evaluation Report</h1>" +
" " +
" <h2>1. Summary of Scores</h2>" +
" <table>" +
" <tr>" +
" <th>Test</th>" +
" <th>Score</th>" +
" </tr>" +
" <tr>" +
" <td>SAT Math Level 1 Test 1</td>" +
" <td>Various Scores</td>" +
" </tr>" +
" <tr>" +
" <td>SAT Math Level 1 Test 2</td>" +
" <td>40, 0, 0, 0</td>" +
" </tr>" +
" <tr>" +
" <td>SAT Math Level 2 Test 1</td>" +
" <td>0, 20, 0, 0, 0, 0</td>" +
" </tr>" +
" <tr>" +
" <td>SAT Math Level 3 Test 1</td>" +
" <td>0, 0</td>" +
" </tr>" +
" </table>" +
" " +
" <h2>2. Statistical Analysis</h2>" +
" <p>[Statistical Analysis Here]</p>" +
" " +
" <h2>3. Score Analysis</h2>" +
" <p>[Score Analysis Here]</p>" +
" " +
" <h2>4. Interpretation of Results</h2>" +
" <p>[Interpretation of Results Here]</p>" +
" " +
" <h2>5. Evaluation of Performance</h2>" +
" <p>[Evaluation of Performance Here]</p>" +
" " +
" <h2>6. Strengths</h2>" +
" <p>[Strengths Here]</p>" +
" " +
" <h2>7. Areas for Improvement</h2>" +
" <p>[Areas for Improvement Here]</p>" +
" " +
" <h2>8. Recommendations</h2>" +
" <p>[Recommendations Here]</p>" +
" " +
" <h2>9. Conclusion</h2>" +
" <p>[Conclusion Here]</p>" +
" " +
" <div class=\"chart-container\">" +
" <!-- Include Charts Here -->" +
" <h2>Test Scores Chart</h2>" +
" <img class=\"center-fit\" src=\"https://quickchart.io/chart?c={type:'bar',data:{labels:['Test 1', 'Test 2', 'Test 3'],datasets:[{label:'Scores',data:[75, 30, 10]}]}}\">" +
" </div>" +
"</body>" +
"</html>"
- Capacitor on Android fails with error: "ERR_SDK_PACKAGE_NOT_FOUND: SDK package not found by location: D:\Android_SDK_HOME\platform-tools."
- Flutter App Cant Authenticate to Google Drive API Using google_sign_in Package
- Spinner in Full Screen android app is showing status bar
- Android SDK not found for react-native
- Android: .nomedia is ignored, images still appear on the gallery
- BuildConfig not getting created correctly (Gradle Android)
- Androidx : How to test Slider in UI tests (Espresso)?
- RequiresApi vs TargetApi android annotations
- React Native, Execution failed for task ':app:mergeDexDebug'
- Request for permission (Pop - up) dialog is not showing in Android
- Reset mutableStateOf if the initial value changes - Jetpack Compose
- How to use a custom typeface in a widget?
- How NOT to create projects with Jetpack Compose using Android Studio
- Customize android app preview when it is in background with secure flag
- Viewmodels in android using mvvm and jetpackcompose
- text and icon parameters in a Tab don't allow composable invocations
- Channel vs Shared Flow what is the difference
- Android Jetpack Compose Room query depending on Flow
- Jetpack Compose how to recompose when internal state changes
- How to fix this Hilt gradle setup?
- How to use ThreeTenABP in Android Project
- Unable to load class Plugin
- How can I add .so files to an android library project using gradle 0.7+
- How to get context for Room database and initialize it correctly in Android Compose?
- How to show/hide password in TextFormField?
- How to pass List of data from NavGraph in android kotlin Android
- Firebase analytics AppMeasurement not enabled
- Why WebView doesn't render raw HTML properly?
- ':google_sign_in_android:compileDebugJavaWithJavac'
- Play Media using URL in Android using Media