Using the HTML5BoilerPlate template from Paul Irish and gang (although, I'm not saying that has anything to do with it) and I have some styles inside tags that are rendering on page. If I move them inside the they work as they're supposed to work. I've done this before to do some quick editing and have never seen the styles rendered on the page. Here's a sampling of the head code:
<!doctype html public "*">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width">
<title>Title</title>
<meta name="bitly-verification" content="xxxxxxxxxxxx" />
<meta name="google-site-verification" content="xxxxxxxxxxxxx" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" type="text/css" media="all" href="css.css" />
</head>
<body>
<div id="container">
<style>
...
</style>
</div>
</body>
However, we've found that taking out the container div allows the style tags to work and they no longer show up in the rendered page. What we haven't figured out is why and that's bothersome. Has anyone ever had this issue? Or can anyone give insight as to why this might happen?
Not a deal breaker just more a matter of knowledge. Thanks.
**EDIT: #selector > * was the culprit - aargh! *
W3Schools state that:
The style element always goes inside the head section. - Reference
It makes sense that putting the style tag in the body (for whatever reason you might be doing that) would come with some undefined behaviours.
Related
I don't really understand, as whenever I try to use one (example: https://codepen.io/plavookac/pen/QMwObb) whenever I try to apply it to my index.html (the global one), it goes on TOP of my content and makes everything else unclickable. Probably something simple I'm missing, right?
My main index:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body>
<app-root></app-root>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
In my global styles file I just import bootstrap and put in the css that I linked above.
You should make main.component.html that manages routing and view order then you can tweak z-index on your css
<div class="background"></div>
<router-outlet></router-outlet>
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
I have read a post, link here: Render-tree Construction, Layout, and Paint
A demo page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>No JS</title>
<link rel="stylesheet" href="http://127.0.0.1:3000/static/css/style.css" />
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
The Performance Panel:
Enlarge the red part:
As you see, there is no step of Render-tree Construction.
Why? Does the post wrong or the Render-tree Construction part is in Recalculate Style?
I have a mobile web application which has the following view-port.
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
In one of the pages of our mobile web app, we are embedding another website using an iframe. This web application is not responsive and doesn't have a viewport meta tag in the head.
We wanted the embedded site's view to be without any initial-scale, but unfortunately, it is having an initial scale (may be 1.0) which attached to it. Looks like it's inheriting from the parent frame. Browser is not letting me to zoom out the iframe content. Both the parent and embedded webpage is in the same domain as well.
Below is the generated code from the browser.
<!DOCTYPE html>
<head>
<base href="/">
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>title</title>
</head>
<body>
<!-- some content -->
<div>
<div class="iframe-wrapper">
<iframe frameborder="0" src="url ot the site>
#document
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=0">
..
</head>
<body>
...
</body>
</html>
</iframe>
</div>
</div>
</body>
</html>
Would it be possible to have a different viewport for the iframe rather than reusing the one from the parent?
fixed tabs
As shown in the figure, some websites don't have favicons. So, Using the fixed tab make them messy.
You can add favicon to your website by following method
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>{$title}</title>
<link rel="icon" href="../images/favicon.png" sizes="32x32">
<link href="../css/style.css" type="text/css" rel="stylesheet">
</head>
I've created a simple layout using grails default layout pattern.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><g:layoutTitle default="my website" /></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon" />
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" />
<g:layoutHead />
<r:layoutResources />
</head>
<body id="mainContainer">
<g:render template="/templates/headerTemplate"></g:render>
<g:render template="/templates/menuTemplate"></g:render>
<g:layoutBody />
<r:layoutResources />
</body>
</html>
Now so far as I understand the <g:layoutBody /> renders the body content. (Please correct me if I'm mistaken). Now I've applied custom styling to the <body> tag of each pages. But that styling is not being applied to my rendered view. Eg. I've an image which I want to apply to the body. But that is not being applied. When I insert a div inside the body and apply the same image to it, its getting applied to it.
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="mainLayout"/>
<title>Match List</title>
<script type="text/javascript" src="${resource(dir:'js',file:'matchDetailsJS.js')}"></script>
</head>
<body class="myclass"> </body>
</html>
My css file is getting included as my styling is being applied to other elements.
What am I missing? Is something wrong with my g:layout? I tried finding in the documentation but so far did'nt find anything much.
Let me know if my question is not clear.
Thanking you!!
I suspect this is because the layout needs to understand you have properties that you wish to supply for the body tag. The Grails documentation has a good example about using page property to specify an onload attribute of the body tag.
Here is the example modified for your needs.
layout
<title><g:layoutTitle default="my website" /></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon" />
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" />
<g:layoutHead />
<r:layoutResources />
</head>
<body id="mainContainer" class="${pageProperty(name:'body.class')">
<g:render template="/templates/headerTemplate"></g:render>
<g:render template="/templates/menuTemplate"></g:render>
<g:layoutBody />
<r:layoutResources />
</body>