Asp.NET Core using React - UTF8 not recognized - reactjs

I have an Asp.NET Core application with React.
Despite the fact that I specified in all of my layouts and head tag:
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
or
<meta charset="utf-8" />
my application does not support accents ...
accents not supported
Can you help me?

Thank you #Karney for your answer.
Unfortunately I am working on visual studio 2019 and I did not find this option.
However, I found an alternative.
I saved all of my files with encoding one by one.
(Screenshots in French)
Save file as...
save with encoding
Choose encoding style
That's all.
It may take a little while depending on the number of files, but it works.

I use ie to test <meta charset="utf-8" />. Changing ie's encoding to other will restore normal fonts. And it is related to the code editor, please check the code of your editor.
Take my compiler (visual studio code) as an example. The encoding of the current page is in the lower right corner.
When I change it to another encoding, garbled characters will be generated on the page.

Related

IE 11 Placeholder text missing

I'm having an issue with placeholder text not appearing in IE 11 when utilizing AngularJS. It shows up on every other browser and I haven't modified any CSS to change the appearance of it. I have even disabled all stylesheets and still can't get them to appear. See image below.
If I visit other sites that utilize placeholders within input fields - I have no issues. I'm a bit stumped in terms of resolving the issue. Any ideas?
$(document).ready(function(){
// IE workaround to show placeholder
$(element).placeholder();
})
So it seems I found my issue and also have a solution to follow up. Prior to this I was having compatibility issues with Angular running in specific version of IE and had force compatibility to IE 9 inserting this in the head of my HTML:
<meta http-equiv="X-UA-Compatible" content="IE=9">
I then proceeded to utilize this angular directive https://github.com/cvn/angular-shims-placeholder. It didn't work right off the bat but after scratching my head some more, I realized it may be a caching issue and upon clearing it out, I now have placeholders within my inputs in IE!

Angular with angular-leaflet-directive not using mobile-friendly rendering

In the interest of learning how to use Angular, I thought I'd port a half-finished project of mine over from vanilla JavaScript.
The original is here: http://john.bitsurge.net/bikeracks/
The new version is here: http://john.bitsurge.net/bikeracks-angular
angular-leaflet-directive: http://tombatossals.github.io/angular-leaflet-directive/
The first thing I noticed was that the angularized version was significantly more CPU heavy than the original. To see this, zoom way out and then zoom in again quickly. This is problem still manifests, even after removing all $watchs from the markers. ng-stats claims there are only 18 $watchs left, which is certainly acceptable.
The output from batarang suggests to me like things are actually pretty fast, but that contradicts that actual user experience, which is noticeably different between the two. Maybe these batarang times are per-call but there are just hundreds of calls being made?
Batarang Output
The second thing I noticed, while trying to debug the first, is that the angular version doesn't appear to be using any mobile-friendly styling! The buttons are hopelessly tiny and I can't read the attribution at all.
Any idea what's going on here?
Angular looks like the desktop version
The vanilla app uses mobile-friendly sizes
I still have no good answer for the performance issues but the map rendering problems were due to a missing <meta> tag in the <head>.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
..
</head>
solves this one! \o/

Viewport on mobiles not defaulting to show full site

i have a fixed width site, and the client has requested that when it is viewed on a mobile, it should show the whole site by default (ie zoomed out).
In my head i have the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Which is the code that came with the wordpress template im currently using.
Ive looked around various answers on here, and tried various different combinations, however, whichever i use, the site always loads on a mobile with the screen zoomed right in to the top corner (have tested a couple on phones, and a couple with responsinator).
I know im probably being really daft here and missing something really obvious, but if anyone could help itd be hugely appreciated!
If anyone would like to take a look at the site directly, its EdoMidas.com
try this:
Replace 1140 with the width of your website.

How to get rid of IE7 emulation from withing the body code?

let's assume I have a so called 2.0 app, compatible from IE6 upwards. The app uses quite complex CSS and is driven by heaps of JS. It works, very well it does.
Now let's assume there is a client who own a strangely coded site, archaic in ways, and forces IE7 emulation through this wonder of a tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Now, he desires to use my app, which is injected in his code using a simple external script call. It works, but not so under the IE7 emulation - obscure bugs from Hell start appearing, not even overflow hidden works properly. By itself the app does work in IE7, but as it turns out, the IE7 emulation is not the same as IE7 and has it's own set of fancy issues.
Turns out the client is unable to strip the emulation meta tag, so I'm left with I don't really know. Does anyone know of ANY WAY I could overpower the rendering mode set in the page header or would there be some other suggestions?
My utmost thanks for anything usable.
Perhaps you could make a wrapper for your app. An iframe that contains an empty page to make the script call. The content of the iframe should not be affected as the meta won't be present in the empty page.

Why is ie7 always in Quirks mode?

Here is the DOCTYPE and XML declaration that I am using:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
But still IE7 is always going to quirks mode...
Does anyone have any idea as to why?
Thanks in advance!
If you have anything before the DOCTYPE apart from the XML prolog, then you will trigger quirks mode in IE7. This includes white space and comments.
The XML prolog will only trigger quirks mode in IE6.

Resources