I'm writing one simple visualisation app and I have one little problem:
webBrowser.Version returns Build: 9600 Major: 11 and despite that I can't use modern CSS3 features to draw circle. Below is HTML code and output I get. I tried various methods found on google and nothing seems to work. Deleted unnecessary code, left only part that is not working in webBrowser.
Oh, btw, it works when opened in standalone IE. Tried also `border-radius: 50%
here is image of what I get
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Main Window</title>
<style>
.circle {
border-radius: 10px;
width: 20px;
height: 20px;
background: blue;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
This is because the WebBrowser class emulates IE and therefore will have a HKEY setting the version of IE used in the emulation.
Below are a couple of suggestions or alternatives.
Meta Tag
<meta http-equiv="X-UA-Compatible" content="IE=10" />
Add the above to your HTML and it will try and force the browser to show the content in IE10.
HKEY Change on machine
Find the below HKEY's
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION
and change or add your App to the values like so
FEATURE_BROWSER_EMULATION "myAppName.exe"=10000
HKEY Change in Code
To do the same as above but within the code, use the following:
RegistryKey registrybrowser = Registry.LocalMachine.OpenSubKey
(#"SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION", true);
registrybrowser.SetValue("myAppName.exe", 10000, RegistryValueKind.DWord);
I think the WebBrowser is stuck at IE7 or IE8. I tried some of these hacks a few years ago to change its version:
https://weblog.west-wind.com/posts/2011/May/21/Web-Browser-Control-Specifying-the-IE-Version
Also Use latest version of Internet Explorer in the webbrowser control
Related
When I'm adding css classes or changing bootstrap classes on view html in ASP.NET MVC, nothing happens.
CSS stylesheet
.icon {
margin-top: 8px;
border: 1px solid white;
border-radius: 100%;
}
.titleLibrary{
color: gray;
}
View html
<a href="#Url.Action("Index","Home")">
<img src="#Url.Content("~/Icons/bookIcon.jpg")" width="50" class="icon" />
</a>
#Html.ActionLink("Library", "Index", "Home", new { area = "" }, new { #class = "titleLibrary" })
screenshot
but when I use style in html everything is fine
<a href="#Url.Action("Index","Home")">
<img src="#Url.Content("~/Icons/bookIcon.jpg")" width="50" style=" border: 1px solid white; border-radius: 100%;" />
</a>
If you are not clearing the cache, then this may be a reason for not reflecting the updated CSS style in your Index or any other page. So try to clear the cache and then try to update the style. For clearing cache use Ctrl+F5. This will helps to clear the cache. The another solution, if you are keeping the style.css file separately, then please give the reference link at the top the Index page, then refresh and rebuild the page and try again.
<head>
<link href="~/Content/background.css" rel="stylesheet" />
</head>
Hey Ivan have you made sure to render your styles on your view you are using? For instance if you are using a layout page you usually would render your style bundle or sheet at the head of the layout page.
I'll give you an example
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Project System</title>
#Styles.Render("~/content/site-bundle")
#RenderSection("styles", false)
</head>
Here you can see me render my style bundle. In this case you can instead render your stylesheet you have.
Make sure, If that css file is in the same directory (or folder) as the html page, it's as easy as typing in "style.css" with the name of the css file matching whatever you called yours. I just used style.css to simplify things. However, if the css file is in another directory (say inside a folder called css) you would need to type out the path to it relative to the html document. In this case, you'd type "css/style.css". Generally, it's a good idea to store your css files in a css folder.
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
I've deployed a Wopi client as mentioned in the documentation and now i'm trying to deploy a wopi host, but i'm new to .net enviroment and i don't know how to get the file hosted in wopi-docs folder. (It seems to be encrypted but i don't know how to get the files in that folder)
I have done the next steps:
I implemented an office online server according the official documentation. (Wopi client)
I tried the discovery URL and it worked perfectly.
I deployed a wopi host according to this repo. (Wopi host and a great repo by the way)
Cloned the repo in the server.
I removed Cobalt project from solution from command line in the root directory.
I rebuilt the solution from command line in the root directory.
I ran WopiHost project from command line in the WopiHost directory.
I ran WopiHost.Web project from command line in the WopiHost.Web directory.
I tried Wopi integration with a wopi host page (i don't know if it's correct, but at least it seems to work partially) like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Enable IE Standards mode -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="https://my-server-url.com/wv/resources/1033/FavIcon_Word.ico" />
<style type="text/css">
body {
margin: 0;
padding: 0;
overflow: hidden;
-ms-content-zooming: none;
}
#office_frame {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
border: none;
display: block;
}
</style>
</head>
<body>
<form id="office_form" name="office_form" target="office_frame" action="https://my-server-url.com/wv/wordviewerframe.aspx?ui=es-mx&rs=es-mx&dchat=1&showpagestats=1&IsLicensedUser=1&WOPISrc=http%3A%2F%2Fmy-server-url.com%3A5000%2Fwopi%2Ffiles%2Ftest.docx" method="post">
<input name="access_token" value="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1laWQiOiIxMjM0NSIsInVuaXF1ZV9uYW1lIjoiQW5vbnltb3VzIiwiZW1haWwiOiJhbm9ueW1vdXNAZG9tYWluLnRsZCIsIlVzZXJQZXJtaXNzaW9ucyI6IlVzZXJDYW5BdHRlbmQsIFVzZXJDYW5QcmVzZW50LCBVc2VyQ2FuUmVuYW1lLCBVc2VyQ2FuV3JpdGUiLCJuYmYiOjE2MTA2MDU5NDgsImV4cCI6MTYxMDYwOTU0OCwiaWF0IjoxNjEwNjA1OTQ4fQ.KbxGcTVOa3yWCGcEHEGv9MRP_NskfViW_vyMTOupRO4" type="hidden" />
<input name="access_token_ttl" value="0" type="hidden" />
</form>
<span id="frameholder"></span>
<script type="text/javascript">
var frameholder = document.getElementById('frameholder');
var office_frame = document.createElement('iframe');
office_frame.name = 'office_frame';
office_frame.id = 'office_frame';
// The title should be set for accessibility
office_frame.title = 'Office Frame';
// This attribute allows true fullscreen mode in slideshow view
// when using PowerPoint's 'view' action.
office_frame.setAttribute('allowfullscreen', 'true');
// The sandbox attribute is needed to allow automatic redirection to the O365 sign-in page in the business user flow
office_frame.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation allow-popups-to-escape-sandbox');
frameholder.appendChild(office_frame);
document.getElementById('office_form').submit();
</script>
</body>
</html>
And the result that i get is the following error:
Does anyone know how to get the correct name of the files to put into the html file above or how do i get the wopi host web?
Thanks in advance.
The file ID in my repo is just base64 encoded. To verify that you're using the correct path, just take the base64 value and pass it to a decoder or write your own utility to decode it.
The ID should be opaque to the WOPI client (Office Online Server) - it accepts it an passess it back to the WOPI host which can undertand it and return the right file.
I recommend putting breakpoints to GetCheckFileInfo and GetFile methods to see if they're being hit correctly and what data they return.
I have a simple .html file defined as below.
If I open it with a normal Web Browser, its background color can be displayed correctly. But when I open it with a System.Windows.Forms.WebBrowser control, the background color can't be displayed.
<head>
<meta charset="UTF-8">
<style>
nw {
background-color: Orange;
}
np {
background-color: DodgerBlue;
}
</style>
</head>
<table style="width:100%">
<tr>
<th>Time Created</th>
<th>Content</th>
</tr>
<tr>
<td>26/11/2018 20:39:21</td>
<td><nw>hello</nw></td>
</tr>
</table>
The Form's TransparencyKey doesn't help; the WebBrowser doesn't have a BackGround color property.
Does anyone know why and how to solve?
In order to modify the aspect of a Html page content, you need to modify the HTML document itself.
The Form's TransparencyKey property and/or the WebBrowser control BackColor property are not relevant. These properties, when available, modify a control's aspect, not the HTML content or its rendering.
Also important: the WebBrowser control, when not otherwise instructed, defaults to IE7 compatibility mode. Many HTML features are not available in this mode.
There are different ways to set/modify the compatibility mode of the WebBrowser class.
You can modify a Registry key to set the IE11/Edge compatibility mode permanently. See this answer:
How can I get the WebBrowser control to show modern contents?
Note that the Key is in the CURRENT_USER branch. You don't need elevated privileges to modify it.
Also, this is not a special hack. This registry value is applied per-executable (you register here your own program), it doesn't modify the general user settings. Notorious programs use this method to set the WebBrowser control compatibility mode.
Another non-permanent, per-document method is to set the HTML header using the HTML5 format:
<!DOCTYPE html>
<meta http-equiv='x-ua-compatible' content='IE=edge'>
Adding these lines to an Html Document, sets the compatibility mode to IE11/Edge.
Your document can be modified as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='x-ua-compatible' content='IE=edge'>
<meta charset="UTF-8">
<style>
nw {
background-color: Orange;
}
np {
background-color: DodgerBlue;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Time Created</th>
<th>Content</th>
</tr>
<tr>
<td>26/11/2018 20:39:21</td>
<td><nw>hello</nw></td>
</tr>
</table>
</body>
</html>
So this is another question regarding valid rendering google maps in WinForms WebControl.
There are two solutions to the problem, one of them is to add specific registry keys (See this article) and another one is to use <meta http-equiv="X-UA-Compatible" content="IE=edge"> (if you own the HTML of the displayed page) (See this article).
Since we host our google-maps html and scripts files on our own servers, we can modify the html file. So we have tried however this causes WebControl to not render html file at all (gray space is displayed). On the other hand the IE works fine.
The workstation we test on has installed IE 11.
Below is our html file. Did we do something wrong? Anyone encountered similar behaviour? How to solve this?
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex" />
<title>Mapa</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.22&libraries=geometry&sensor=false"></script>
<!-- multiple javascript files -->
<script type="text/javascript">
var map;
var panorama;
function initialize() {
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(0.0, 0.0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
panorama = map.getStreetView();
/* some init functions */
}
</script>
</head>
<body style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;" onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>
Sorry for <!-- multiple javascript files --> and /* some init functions */ but I had to cut these parts out. These are only <script type="text/javascript" src="..."></script> lines and 2 function calls in second one. If those 2 parts are really important and will lead to solve the problem I can try to post them.. somehow.
Mind that whatever we use in content="IE=edge" part, edge, or any other version number the result is the same.
Below is the screen of the WebControl when we use the X-UA-Compatible.
(Obiviously the red text is made in snipping tool ;))
I work with the team which created another browser component – DotNetBrowser.
I think this component will be helpful for your case since it is based on the Chromium engine and should render the Google Maps without any issues.
I'm having an issue trying to use Telerik REST services and their HTML5 Report Viewer.
Here's my scenario:
I have a C# console application which is hosting the REST services API. I have set this project up as per Telerik's article: How To: Self Host Telerik Reporting REST Web API. This seems to be working without issue. I am able to go to http://localhost:8080/api/reports/formats and I get the expected results, which suggests to me the REST server is available and is processing requetss.
I then set up a separate project to run the report viewer. This is a C# Windows forms application, which has a WebBrowser element pointing to the URL of my report viewer HTML file. The Report Viewer HTML file is the default generated file when you create a new Telerik HTML 5 Report Viewer in Visual Studio - it builds all of the necessary pieces for you. Here is the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Telerik HTML5 Report Viewer</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.blueopal.min.css" rel="stylesheet" />
<!--kendo.all.min.js can be used as well instead of kendo.web.min.js and kendo.mobile.min.js-->
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.web.min.js"></script>
<!--kendo.mobile.min.js - optional, if gestures/touch support is required-->
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.mobile.min.js"></script>
<link href="ReportViewer/styles/telerikReportViewer-9.0.15.324.css" rel="stylesheet" />
<script src="ReportViewer/js/telerikReportViewer-9.0.15.324.min.js"></script>
<style>
#reportViewer1 {
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
overflow: hidden;
font-family: Verdana, Arial;
}
</style>
</head>
<body>
<div id="reportViewer1">
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#reportViewer1")
.telerik_ReportViewer({
serviceUrl: "http://localhost:8080/api/reports/",
templateUrl: "ReportViewer/templates/telerikReportViewerTemplate-9.0.15.324.html",
//ReportSource - report description
reportSource: {
report: "Reports/SampleReport.trdx",
parameters: {
Date: new Date(),
}
},
viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
scale: 1.0,
ready: function () {
//this.refreshReport();
},
});
});
</script>
</body>
</html>
When I run this appliaction, the web browser loads the page, but then displays " Error loading the report viewer's templates." I've tried putting the templates on the server side of things, but I can't seem to figure out what I'm doing wrong.
If anybody has any suggestions as to what I could try to resolve this error, I would very much appreciate it! I am using Telerik 2015 Q1.
Thanks!
I have found my problem. Turns out it was a cross-origin problem. I ended up taking my required templates and scripts and such, and hosting them on a simple IIS page on the server, and reference them using an absolute URL. That has gotten me around the issue I was having.