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>"
- EventBus - Subscriber class and its super classes have no public methods with the @subscribe annotation
- Check for navigation bar
- How to manually set the FirebaseAuth User emailVerified status to true
- You can't submit updates as some information about your app is incomplete (Google Play)
- Android Ethernet and Wi-Fi at the same time
- How to create a Custom BottomNavigationAppBar in jetpack compose?
- How to capture app traffic on Android
- How to unzip, edit and zip an android apk
- Change password with Firebase for Android
- How to avoid reverse engineering of an APK file
- HTTPResponse debugging with the android emulator
- Using cookies with Android volley library
- Kotlin - Most idiomatic way to convert a List to a MutableList
- Gif image is not working in android in react native
- Flutter: Execution failed for task ':app:compileDebugKotlin'
- How to implement Container Transform with Material Motion on Jetpack Compose
- How to use Google Cloud Translation API in Android Studio?
- Retrofit always calling onFailure even response is 200
- Add intent extras in compose UI test
- How to set Google Vision QR Scanner to detect only one value?
- SignalR Client implementation in unity works in editor but not in Android
- Jetpack Compose Material3 Pull to Refresh functionality
- How can I align vertical center contents in Android Compose VerticalPager
- How can I achieve before-after animation in Jetpack Compose?
- Setting requestedOrientation results in crash
- Android Studio 3.1.3 - Unresolved reference: R - Kotlin
- Android Wrap Shell Script Doesn't Work as Expected
- I can't backup my realm database in External Directory because of mkdirs()
- At what point can I get the width of a view in a RecyclerView?
- Android-studio ERROR: Cannot add task 'copyDebugIconFonts' as a task with that name already exists