CSS Styles not getting loaded only plain HTML loading for Mobile and Chrome browser for Salesforce c-CodePudding

The

Below is the Webview sample code

Control.SetWebViewClient(new JavascriptWebViewClient(this, $"javascript: {JavascriptFunction}")); Control.AddJavascriptInterface(new JSBridge(this), "jsBridge"); Control.Settings.AllowFileAccess = true; Control.Settings.JavaScriptEnabled = true; Control.Settings.AllowFileAccessFromFileURLs = true; Control.Settings.AllowUniversalAccessFromFileURLs = true; Control.Settings.AllowContentAccess = true; Control.Settings.DomStorageEnabled = true; Control.SetWebChromeClient(new WebChromeClient()); Control.LoadDataWithBaseURL("https://service.force.com/embeddedservice/5.0/esw.min.js", content1, "text/html; charset=utf-8", "UTF-8", null);

here the content loading on Webview initially which has html and JavaScript.

How can I fix this issue ?

Edit 1 : This is how I am trying to load styles inside head tag of above mentioned html content file. I tried many combination using rel type also. Nothing seem to be working.

//1 <base href="/"> <link href="file:///android_asset/salesforce-lightning-design-system_touch-demo.css" type="text/css"/> //2 <base href="/"> <link href="salesforce-lightning-design-system_touch-demo.css" type="text/css"/> //3 <base href="/"> <link href="file:///android_asset/salesforce-lightning-design-system_touch-demo.css" type="text/css" crossorigin="anonymous" /> //4 <link href="salesforce-lightning-design-system_touch-demo.css" type="text/css" /> //5 <link href="/salesforce-lightning-design-system_touch-demo.css" type="text/css"> //6 <link href="file:///android_asset/salesforce-lightning-design-system_touch-demo.css" type="text/css" />

When I tried <link rel="stylesheet" href="test.css" />, its working in chrome browser but not working in mobile application.

CodePudding user response：

Try loading CSS files like this or use internal css.

embedded_svc.settings.externalStyles = ["...", “...”]

Source link

CodePudding user response：

You can use an alternative way by injecting css styles. I am proud to share an example usage with you. You can use it in Activity or fragment. Converting to Kotlin will be easy.

For Sample Java code

mWebView = new WebView(MainActivity.this); mWebView.getSettings().setJavaScriptEnabled(true); mWebView.getSettings().setDomStorageEnabled(true); mWebView.getSettings().setMediaPlaybackRequiresUserGesture(false); mWebView.setLayerType(View.LAYER_TYPE_HARDWARE, null); final Activity activity = this; mWebView.setWebChromeClient(new WebChromeClient() { public void onProgressChanged(WebView view, int progress) { // Activities and WebViews measure progress with different scales. // The progress meter will automatically disappear when we reach 100% activity.setProgress(progress * 1000); } @Override public void onPermissionRequest(final PermissionRequest request) { // Log.d(TAG, "onPermissionRequest"); // As we are targeting Android 21, there's no need to prompt for permission. // Just go ahead and grant the permission here. request.grant(request.getResources()); } }); mWebView.setWebViewClient(new WebViewClient() { public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) { Toast.makeText(activity, "Oh! " description, Toast.LENGTH_SHORT).show(); } @Override public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) { handler.proceed(); // Ignore SSL certificate errors - DANGEROUS, JUST FOR NOW } @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { // Clear out speech hooks, etc. when the page is loaded // Log.i(TAG, "onPageStarted: Clearing user handlers!"); // if (mSrec != null) mSrec.clearUserHandlers(); } @Override public void onPageFinished(WebView view, String url) { injectCSS(); // TODO < YOUR INJECT CSS super.onPageFinished(view, url); } }); mWebView.setId(View.generateViewId()); layout.addView(mWebView, 0); } private void injectCSS() { try { mWebView.evaluateJavascript( "javascript:(function() {" " console.log('Injecting code');" " let style = document.createElement('style');" " style.type = 'text/css';" " style.innerHTML = '" " head {" " -webkit-transform: translate3d(0, 0, 0);" " transform: translate3d(0, 0, 0);" " };" " body {" " -webkit-transform: translate3d(0, 0, 0);" " transform: translate3d(0, 0, 0);" " };';" " document.head.appendChild(style);" " document.body.appendChild(style);" "})()", null ); } catch (Exception e) { e.printStackTrace(); } }

Or

SalesForce Documents

embedded_svc.settings.externalStyles = ["...", “...”]

Specify your resources using the static resource name, not the file name itself. For example, if you upload CustomEvent.css and give it the name CustomEventCSS, enter CustomEventCSS.

For Javascripts

embedded_svc.settings.externalScripts = ["...", “...”]

Link