WebView does not render css like the browser does?
Apparently:
web.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
was causing the webview to freak out, as it reorganizes the html renderer to place everything in a single column (or try to anyways). Disabling this line or using NORMAL causes the render to be just fine.
I was only using this line to disable horizontal scrolling. So now i have THAT issue to deal with again and still.
RedactedProfile
I sling web for a living. No seriously, by day and by night, I sling web. I make websites, is what I'm getting at.
Updated on June 12, 2022Comments
-
RedactedProfile almost 2 years
As far as im aware, the WebView is the same thing as the built in browser? Right?
I am facing an issue where a page that contains some absolute positioned div elements all stack on top of eachother instead of finding their correct location, AND background-image gets completely ignored.
This said, in the browser on my phone (HTC Incredible S - 2.3.3, stock browser) renders it out correctly, and on top of this, applications that use an embedded webview that i can point it to the page, renders correctly. Which leads me to beleive that the webview I have in my application is bjorking somehow.
import android.app.Activity; import android.content.Intent; import android.graphics.Rect; import android.graphics.drawable.AnimationDrawable; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.webkit.WebSettings.LayoutAlgorithm; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.Button; import android.widget.ImageButton; import android.widget.ImageView; import android.widget.Toast; import java.util.*; public class ShowWebView extends Activity { public WebView web; public String baseURL = "http://test.dev/"; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.webpage); web = (WebView) findViewById(R.id.webpage); home = (Button) findViewById(R.id.tool_Home); back = (ImageButton) findViewById(R.id.tool_Back); forward = (ImageButton) findViewById(R.id.tool_Forward); refresh = (ImageButton) findViewById(R.id.tool_Refresh); ajax = (ImageView) findViewById(R.id.test_anim); ajax.setBackgroundResource(R.drawable.ajax_animation); // Settings web.getSettings().setJavaScriptEnabled(true); web.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); web.setWebViewClient(new WebViewClient()); Bundle extras = getIntent().getExtras(); if(extras != null) { String url = baseURL+extras.getString("page")+"?androidApplication"; // The Basics, page gets added to baseURL String id = ""; String push = "false"; // false by default // If an ID exists, lets get it if(extras.getString("id") != null) { id = extras.getString("id"); } if(extras.getString("push") != null) { push = extras.getString("push"); } // Build the URL if(id != "") url = url + "&id="+id; if(push != "false") url = url + "&pushVersion"; web.loadUrl(url); } else { web.loadUrl("http://www.bing.com"); } }
also heres my webview xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" style="@style/MainPage" android:orientation="vertical" > <LinearLayout android:id="@+id/Header" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <ImageView android:id="@+id/ImageView01" android:layout_width="match_parent" android:layout_height="42sp" android:scaleType="fitXY" android:src="@drawable/top_header" /> </LinearLayout> <LinearLayout android:id="@+id/SubHeader" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <ImageView android:id="@+id/imageView1" android:layout_width="match_parent" android:layout_height="28sp" android:scaleType="fitXY" android:src="@drawable/top_sub_header" /> </LinearLayout> <LinearLayout android:id="@+id/linearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <LinearLayout android:id="@+id/linearLayout2" android:layout_width="match_parent" android:layout_height="0dip" android:layout_weight="1" android:orientation="vertical" > <WebView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/webpage" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> <LinearLayout android:id="@+id/toolBar" android:layout_width="match_parent" android:layout_height="40sp" android:layout_marginTop="2.5sp" android:orientation="horizontal" > <Button android:id="@+id/tool_Home" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Home" /> <ImageButton android:id="@+id/tool_Back" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/backward" /> <ImageButton android:id="@+id/tool_Forward" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/forward" /> <ImageButton android:id="@+id/tool_Refresh" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/refresh" /> <ImageView android:id="@+id/test_anim" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:layout_centerHorizontal="true" /> </LinearLayout> </LinearLayout> </LinearLayout>
any help resolving this issue would be truly amazing!
-
Jason almost 11 yearsTried everything and this finally worked for me. If you're having issues with CSS, try this. Thanks!
-
blueware over 7 yearsYep, This line fixes the CSS issue rendering:
web.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
, +1 for the answer -
Lorenzo Vincenzi over 2 years
WebSettings.LayoutAlgorithm.NARROW_COLUMNS
is actually deprecated, useWebSettings.LayoutAlgorithm.NORMAL