I am driving crazy with this thing.
I am running a SPA in React, working fine on several hundreds of servers.
On a specific server of one of my customers (I mean: just one single server) there is a weird problem with svgs, let me explain.
The svg icons are in the DOM, but they don't show up. The svg tag is not even recognized by the browser DOM.
svg not recognized
I found that, if I try to edit HTML via inspector by adding a space after tag, the svg become magically appears.
adding a space after
...tadaaaa! magic
I am using iconify for React for rendering the svgs.
I tried also to run on the server this simple html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
</head>
<body>
<div id="app"></div>
</body>
<script>
const svg = `<svg xmlns="https://www.w3.org/2000/svg"
xmlns:xlink="https://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--dashicons"
width="18px"
height="18px"
preserveaspectratio="xMidYMid meet"
viewbox="0 0 20 20"
style="color: rgb(0, 113, 174);"
>
<path fill="currentColor" d="M6 15V2h10v13H6zm-1 1h8v2H3V5h2v11z"></path>
</svg>`;
document.getElementById('app').innerHTML = svg;
</script>
</html>
And this works fine.
Anyone can undestand what's the problem on this server?
Thanks in advance
M
Related
I'm trying to create a component (here named "meta-info") which renders a meta-tag with dynamic information (which is being fetched via Rest-Webservice) into the head-tag.
Problem is: In the processed html the component won't stay in the head but gets rendered into the body as the first element, and every script and style tag in the head which follows the component in the code also gets moved into the body. It's like the component automatically opens a body-tag. :-(
Anyone got a tip of how to achieve what I need?
<!DOCTYPE html>
<html lang="de" class="app-basic-an" ng-app="app">
<head>
<meta charset="utf-8">
<title ng-bind="$ctrl.title"></title>
<meta http-equiv="cache-control" content="no-cache, no-store">
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta-info></meta-info>
[...]
</head>
<body>
[...]
</body>
</html>
An AngularJS not allow views to set the page title and insert extra elements into the head.
Try to use additional module angularjs-viewhead for it
https://github.com/apparentlymart/angularjs-viewhead
var app = angular.module('myApp', ['viewhead']);
<meta view-head name="description" content={{metaDescription}}>
I've created a server-side react app, where it would return html as shown below:
const html = renderToString(<App />);
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>A Cool Page</title>
<link rel="stylesheet" href="${ROOT}/static/index.css">
</head>
<body>
<div id="root">${html}</div>
<script src="${ROOT}/client-bundle.js"></script>
</body>
</html>
I read a lot of people have been using react-helmet to manage the content in head. I'm wondering what's the benefit of using it, when I can just directly include as shown above.
A major benefit of react-helmet is when you have multiple components in a tree with <head> tags, and you have <meta> tags with the same attributes/values.
For instance, if on your index page component you have:
const html = renderToString(<App />);
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="This is the index page description">
<title>A Cool Index Page</title>
</head>
</html>
But then on a leaf page component, you also have a <head> tag containing meta tags:
<html>
<head>
<meta name="description" name="This is the unique leaf page description">
<title>A Cool Leaf Page</title>
<link rel="stylesheet" href="${ROOT}/static/index.css">
</head>
</html>
Notice between our two page components there are two meta tags with the same attribute value name="description" in our tree. You might think this could lead to duplication, but react-helmet takes care of this problem.
If someone ends up on the leaf page, react-helmet overrides the index/site-level description meta tag and renders the lower-level one, the one specifically for the leaf page.
It will also contain the viewport meta tag, since it did not have to be overwritten.
Because of react-helmet, on the leaf page, the <head> would appear as follows:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" name="This is the unique leaf page description">
<title>A Cool Leaf Page</title>
<link rel="stylesheet" href="${ROOT}/static/index.css">
</head>
</html>
react-helmet allows to set meta tags that will be read by search engines and social media crawlers. This makes server-side rendering and React Helmet a dynamic duo for creating apps that are SEO and social media friendly.
eg:
import { Helmet } from 'react-helmet';
<Helmet>
<title>Turbo Todo</title>
<meta name="description" content="test on react-helmet" />
<meta name="theme-color" content="#ccc" />
</Helmet>
Both methods should work. But with react-helmet, the head is also treated as a component and is more react-like. Also, although it's unusual, you may bind some props or states with the meta-data to implement a dynamic head. One scenario is switching between different languages.
React Helmet also allow you to modify classes outside the scope of your render function.
For example, if you want to modify your <body> tag dynamically, you could do the following:
<Helmet>
<body className="dynamic-class-for-body-on-this-view" />
</Helmet>
React Helmet is a reusable React component that will manage all of your changes to the document head.
For example, if you want to change the title and meta description of every page according to your SEO, you could do the following:
<Helmet>
<title>Your Title</title>
<meta name="description" content="Description of your page" />
</Helmet>
I specifically use Helmet for meta tags and to also change the style of a 3rd party component that isn't editable.
<Helmet>
<script type="text/javascript">
{`
window.addEventListener('load', function () {
document.querySelectorAll('.noEditStars > span').forEach(span => {
span.style.cursor = 'pointer';
});
}, false);
`}
</script>
</Helmet>
I'm using Vue-material on my VueJS 2 site and it looks as expected on my laptop. It responds accordingly as I shrink the screen. However, when I emulate a smartphone or open the site on my smartphone it simply looks like a "shrunken" version of the computer layout.
I may be missing something basic here, but I'm not sure what it is.
Site in shrunken down browser window 👍:
Site on smartphone 👎:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
add these two lines in your site's Html because it is missing meta viewport tag.
I hope it would help you.
add this meta to your index.html
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Example index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>win-vue</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
I'm having issues launching a React.js app built with Gulp.
I ran npm install even npm update, but when I go to the browser, I do not see the app, but instead I see a blank screen.
Also, I noticed that gulp build produced a blank index.html file.
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Default</title>
<meta name="description" content="">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="./app.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="registration-form"></div>
</div>
<script src="./app.js"></script>
</body>
</html> -->
Please advise.
I am still learning the tricks to jQuery mobile and have been having a problem with the zooming in and zooming out of a picture/image on a data-role="page." Is there a way to make the pinch/zoom work on an image on the iPhone using jquery mobile? Cant get it to work on the iOS Simulator. Here is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=2" name="viewport">
<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application.
To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... -->
<script src="/phonegap.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content" style="padding:0;">
<img src="coffee.gif" width="320" height="480" alt="coffee">
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Thanks so much for your help. Much appreciated.
-bob
edit the "viewport" in meta tag with this
<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=2, minimum-scale=0.5, width=device-width, height=device-height, target-densitydpi=device-dpi" />
It's the viewport metadata property that controls those settings.
Follow this to see how to enable pinch & zoom on JQM iOS (shouldn't really matter that you are using PhoneGap).
Hope this helps.
When jQuery Mobile renders a page, it adds the following meta tag to
the head of the document.
<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">
It is the minimum-scale=1, maximum-scale=1 part of
the tag which disables the pinch zoom. What we need to do is modify
the $.mobile.metaViewportContent variable. We can do this using the
following code.
$(document).bind('mobileinit', function(){
$.mobile.metaViewportContent = 'width=device-width';
});
If we want to restrict the amount of zooming, we can use the following:
$(document).bind('mobileinit', function(){
$.mobile.metaViewportContent = 'width=device-width, minimum-scale=1, maximum-scale=2';
});