Why can't I use custom font with Material Design Lite? - javascript

Today I learned how to use Material Design Lite. But I have a problem: I can't use custom font. How can I fix something like this?
If I delete <link rel="stylesheet" href="css/material.min%202.css" /> from my file, it will change my font into Raleway. But if I still use <link rel="stylesheet" href="css/material.min%202.css" />, it will replace my font with default.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/material.min%202.css" />
<style>
#font-face{
font-family: 'Raleway';
src: url('WebFont.eot');
src: url('./fonts/raleway-regular-webfont.woff') format('woff'),
url('./fonts/Raleway-Regular.ttf') format('truetype');
}
.container{
font-family: 'Raleway';
}
</style>
</head>
<body>
<br>
<div class="container">
<div class="centered">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
<h2>Harap segera lakukan verifikasi email anda untuk bisa melanjutkan ketahap berikutnya.</h2>
</div>
</div>
<script src="js/material.min.js"></script>
</body>
</html>

There are two possible reasons:
The file fonts you are referencing do not resolve (the links are wrong or the files are corrupted/invalid/truncated) - this should create some entries in your console log (most browsers issue warnings whenever they are unable to resolve resources)
You have a stronger selector applying a different rule to the element you are trying to style (right-click > "Inspect element" > find font-family value and what is setting it - most browsers allow you this type of inspection; if your does not, use Chrome or Firefox).
Very important: Please note that, even if you specify a font-family for a parent, if the child has a specified font-family it will ignore any font-family coming from parents, regardless of selector strength in parent rule.
For example:
body {
font-family: monospace !important;
}
p {
font-family: sans-serif;
}
<p>I am <p>.</p>
<div>I am not <p>.</div>
will give <p> elements inside your <body> a value of sans-serif and not monospace, as you'd expect.
Most likely, you need to find the rule setting font-family for your element(s) and override it at the same (parent) level or below (in a child). Trying to override it from above where it is currently set will not work.
A good trick in overriding font-family from parent level is to use
parentSelector * {
font-family: value !important;
}
... as this will match any rule set at child level, and the !important will get applied:
body * {
font-family: monospace !important;
}
p#some-id {
font-family: sans-serif;
}
<p id="some-id">I am <p>.</p>
<div>I am not <p>.</div>
In this example body * and p#some-id are referring to same child and the stronger selector (!important) gets applied.

Related

Using w3-include-html breaks some tags and JS scripts stop working

I just got my bachelor's degree in Computer Science and I was wanting to make a portfolio website to pair with my resume. I first was just using a basic static HTML. Then eventually I thought to myself there has to be a better way to do this when I have multiple pages with the exact same content, that being a header and a footer. I found out about w3-include-html and there we go I have dynamic webpages and I no longer have to update the same HTML on multiple pages. Except I have realized that something is wrong. It seems meta, link tags, and potentially other tags as well, but also JS scripts inside included HTML files do not work. I have no experience with website building really other than a very small amount of HTML coding from high school. I thought I would be able to push my way through from all my other CS experience, but I just cannot figure out this bug. From what I have seen other people can use JS scripts inside an included HTML file, so I am not sure what is wrong.
The facts:
The tab icon, does not work if it is inside header.html. It only works if I put it inside index.html.
The website description is just like the tab icon does not work in footer.html only inside header.html.
In both OperaGX, Chrome, and Edge if I inspect the webpage the header and the footer are inside the body tag for some reason unlike what the index.html has. Which I believe may be the culprit, but I cannot figure out how to fix this.
footer.html contains a very basic JavaScript script to print the current year for the copywrite notice, yet it is not visible unless I put that code directly inside index.html instead.
I am using Apache2 to host the website inside a docker container, it is the httpd:2-alpine docker image.
I am using NginxProxyManager as a reverse proxy which gives the website a TLS certificate for HTTPS, it is the jlesage/nginx-proxy-manager docker image.
I am in fact fully refreshing the page after update by using CONTROL + F5 and sometimes even manually deleting cached data just in case. So I am in fact seeing new changes.
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<!-- <link rel="icon" type="image/png" href="/icons/terminal16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/icons/terminal48x48.png" sizes="48x48"> -->
<div w3-include-html="modules/header.html"></div>
</head>
<body>
<!-- ... -->
</body>
<footer>
<div w3-include-html="modules/footer.html"></div>
<!-- <div class="container">
<small>Matthew Green © 2022 -
<script>document.write(new Date().getFullYear())</script>
</small>
</div> -->
</footer>
<script src="scripts/include_html.js"></script>
<script>includeHTML();</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll("pre code").forEach(block => {
window.hljs.highlightBlock(block);
});
});
</script>
</html>
header.html
<!-- Meta Data -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="manifest" href="/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<link rel="icon" type="image/png" href="/icons/terminal16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/icons/terminal48x48.png" sizes="48x48">
<meta name="theme-color" content="#ffffff" />
<title>Matthew Green's Showcase</title>
<meta name="description"
content="Hi, I am Matthew Green and this is a showcase of all my work experience, skills, and projects." />
<!-- Styles -->
<link rel="stylesheet" href="https://unpkg.com/terminal.css#0.7.2/dist/terminal.min.css" />
<style>
.components-grid {
display: grid;
grid-column-gap: 1.4em;
grid-template-columns: auto;
grid-template-rows: auto;
}
.image-grid {
display: grid;
grid-template-rows: auto;
display: grid;
grid-gap: 1em;
grid-template-rows: auto;
grid-template-columns: repeat(auto-fit,
minmax(calc(var(--page-width) / 12), 1fr));
}
#media only screen and (min-width: 70em) {
.components-grid {
grid-template-columns: 3fr 9fr;
}
}
</style>
<style>
:root {
--global-font-size: 15px;
--global-line-height: 1.4em;
--global-space: 10px;
--font-stack: Menlo, Monaco, Lucida Console, Liberation Mono,
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
serif;
--mono-font-stack: Menlo, Monaco, Lucida Console, Liberation Mono,
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
serif;
--background-color: #222225;
--page-width: 60em;
--font-color: #e8e9ed;
--invert-font-color: #222225;
--secondary-color: #a3abba;
--tertiary-color: #a3abba;
--primary-color: #62c4ff;
--error-color: #ff3c74;
--progress-bar-background: #3f3f44;
--progress-bar-fill: #62c4ff;
--code-bg-color: #3f3f44;
--input-style: solid;
--display-h1-decoration: none;
}
</style>
<!-- Navigation Bar -->
<div class="container">
<!-- ... -->
</div>
footer.html
<p>
<small>Matthew Green © 2022-
<script>document.write(new Date().getFullYear())</script>
</small>
</p>
scripts/include_html.js
function includeHTML() {
var z, i, elmnt, file, xhttp;
/* Loop through a collection of all HTML elements: */
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/* Make an HTTP request using the attribute value as the file name: */
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) { elmnt.innerHTML = this.responseText; }
if (this.status == 404) { elmnt.innerHTML = "Page not found."; }
/* Remove the attribute, and call this function once more: */
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/* Exit the function: */
return;
}
}
}
I have tried removing and adding different tags on all the different HTML files, such as the head tag, no dice. I thought maybe it was just OperaGX moving my included HTML code to the body but after checking both Chrome and Edge that is not the case. I have tried using the w3-include-html by having the source script directly from the w3 website, didn't change anything. I have moved the includeHTML() call inside the head tag, it didnt change anything as well.
If anyone has any ideas on what is wrong I would appreciate some help sooooooo much.
Okay so a template tag did not seem to be what I needed. Maybe I could have gotten it to work, but at a quick glance seem to be not what I was asking for. Maybe that comment will help someone else who reads this later. But thanks for the idea Sebastian.
For me I went with PHP like j08691 recommended. I ended up switching docker containers from httpd:2-alpine to chvb/docker-apache-php which is on the Apps page for my OS Unraid. It just seemed easier than trying to get PHP working on my apache2 configuration. Although once I did that I had some problems with document access, but I was able to fix that pretty quickly I just had to add a section to the VirtualHost config and grant access to everything.
I also had to update my index.html to index.php to get the php include to work.
index.php
<!DOCTYPE html>
<html lang="en-US">
<head>
<?php require 'modules/header.php'; ?>
</head>
<body>
<!-- ... -->
</body>
<footer>
<?php require 'modules/footer.php'; ?>
</footer>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll("pre code").forEach(block => {
window.hljs.highlightBlock(block);
});
});
</script>
</html>
footer.php
<?php
echo "
<div class=\"container\">
<small>
Copyright © 2022-" . date("Y") . " Matthew Green
</small>
</div>
";
Then I had an issue with not being able to access my icons. I was just getting an error 403 and error 404 on the icon directory and the icons themselves. However, I noticed that my local IP address they worked fine. Went back to my VirtualHost config and realized I had a placeholder ServerName and ServerAlias. I just completely removed these as my NginxProxyManager handles that stuff already with a reverse proxy as well as the TLS certificate. I also changed the permissions for the files in my www directory as I think this might have been an issue as well with the errors.
A tip for anyone reading:
I swapped from an icon directory and using link tags to just going to https://favicon.io and inputting an .SVG file, which I got from https://fonts.google.com/icons and taking the results and putting them directly into the root www directory. BTW Google Fonts is completely free for all uses including commercial use.
Now the header meta data tags are actually in the header section when inspecting now. I can see the tab icon on all browsers. Also I got the footer correctly displaying the current year.
Cheers to both j08691 and Sebastian for there input.

How to reset font-size attribute set in html tag

Assuming I have a folowing code - fiddle - with font-size attribute set for <html> tag. This styling along with header and footer is generated via js script which cannot be removed. This is already existing page for a long time.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="bootstrap4.css">
<link rel="stylesheet" href="myCustomCss.css">
<link rel="stylesheet" href="cssLoadedByJs.css">
</head>
<body>
<div>
Header (need to stay as it is now with smaller font)
</div>
<div class="content"> <!-- (need to reset it 100%, so content will be sized as I want...) -->
Content
<h2>
H1 here
</h2>
</div>
<div>
Footer (need to stay as it is now with smaller font)
</div>
</body>
</html>
Css file injected by remote js (cssLoadedByJs.css) - cannot remove it, need to stay:
html {font-size: 62.5% !important;}
myCustomCss.css - what I was trying to do:
html .content {
/* font-size: 100% !important; */
/* font-size: unset; */
/* font-size: 16px; */
}
How to reset font-size attribute for content div only and preserve header and footer as it is?
I've tried to set font-size: unset; or font-size: 100% for content div but no result. font-size: 16px let me render text in 16px as I want, but h2 still has only 20px insted of 32px (due to this sizing for html tag, bootstrap use 2rem for h2). Anyway I believe that there is better way than just hardcoded pixel size. Possible to do this somehow? Pls check fiddle for better understanding and tests...
I'm not sure why exactly are you using font size on html tag directly but maybe the following hack can help overcome your problem.
html > body > div.content,
html > body > div.content * {
font-size: 137.5%;
}
I seriously advise not using this approach and styling specific elements instead.
Check this: https://jsfiddle.net/5jdrta16/1/
I took the font-size... important setting off of the <html> and applied it to the <body> element (without important). I also moved all the styling into the CSS.
.content {
font-size: 30px; /* I used 30px vs. 16px to more clearly illustrate that it's applied */
}
body {
font-size: 62.5%;
}
What about:
.content, .content * {
font-size: initial;
}

External font does not load when link is loaded from inside the shadowDOM

At the begining I want to say that I'm aware that the question is similar to:
How to let imported css font / icons have effects on elements in the shadow dom?
It's not the case and it does not help.
Issue:
I've recently decided to use the ShadowDOM to encapsulate the styles in my project. At the very begining it I thought it worked as expected but I've noticed that some of the icons coming from the external CSS files were gone.
It's important to notice that those styles are external and possibilities of making changes are limited.
I've prepared the code to demonstrate the issue (look at the snippet below).
Everything seems to be working fine except the #font-face
As You can see, HTML containing the external CSS file with icons works as expected outside the ShadowDOM. I'd like to use it inside the shadowDOM as well.
How can I achieve that ?
NOTE: If you check the dev tools, there is a problem with the CSS path in network tab but it's the SO snippet issue. If You run the snippet locally, everything is ok in network.
const body = document.getElementsByTagName('body')[0];
const wrapper = document.querySelector('.wrapper')
const handleAddToShadowClick = (param) => {
const host = document.querySelector('#shadowHost');
if(param === 'insideShadow') {
const shadowRoot = host.attachShadow({mode: 'open'});
shadowRoot.innerHTML = firstComponent
} else {
const shadowRoot = host;
wrapper !== null ? body.removeChild(wrapper): ''
shadowRoot.innerHTML = firstComponent
}
}
const firstComponent = `
<div class="wrapper">
<div class="icon login">Bla bla</div>
<div style="font-family: testFont;">Sample String od text</div>
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
</div>
`
.wrapper {
font-family: agGridBalham;
background-color: aquamarine;
color: black;
}
.balham:before {
content: "\F11F";
}
.login::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
Refresh the page after each button click
</p>
<button onclick="handleAddToShadowClick('outside')">Add outside shadow</button>
<button onclick="handleAddToShadowClick('insideShadow')">Add inside shadow</button>
<div>
<div id="shadowHost"> </div>
</div>
<script src="./script.js"></script>
</body>
</html>
The behavior mentioned in the question is a bug which has been there in chromium(It was also there in Gecko too not sure if it has been fixed or not).
Here is the link for the bug reported at chromium related
to this issue, which still not resolved by them. At, present i feel
this is the only workaround which will work.
The issue is mainly related to scoping of #font-face. Currently you cannot use the fonts awesome fonts when they are only included inside the shadow DOM. So inorder to use the fonts the fonts css must be present inside both light DOM and shadow DOM. So you need to import the font css both inside the shadow dom and the light dom.
Here is a Working Plunker which solves your problem.
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
</head>
<body>
Refresh the page after each button click
</p>
<button onclick="handleAddToShadowClick('outside')">Add outside shadow</button>
<button onclick="handleAddToShadowClick('insideShadow')">Add inside shadow</button>
<div>
<div id="shadowHost"> </div>
</div>
<script src="lib/script.js"></script>
</body>
</html>
As you can see the plunker above, we have included the font-awesome css both in light DOM and Shadow Dom. And it is working fine as intended.

Ext.Net button change font size

how I can change font size of a Ext.Net button.
I have tryed:
Css:
.x-16
{
font-size: 16px;
}
Razor:
X.Button().Icon(Icon.PluginAdd).ID("NewTask").Text("New Task").Handler("Myapp.ShowWinAddTask").Cls("x-16")
Any ideas?
You need to modify the CSS declaration to this
.x-16 .x-btn-default-small .x-btn-inner
{
font-size: 16px !important;
}
and set the CtCls property to your custom class
X.Button().CtCls="x-16"
I would recommend a bit different solution.
It prunes "-small" from the CSS rule. That "-small" part depends on a Button's Scale.
Also it prunes the "!important" statement which is good to avoid as much as possible.
<!DOCTYPE html>
<html>
<head>
<title>Ext.Net.MVC v2 Example</title>
<style>
.x-16 .x-btn-inner {
font-size: 16px;
}
</style>
</head>
<body>
#Html.X().ResourceManager()
#Html.X().Button().Text("Button").Cls("x-16")
</body>
</html>

jQuery UI CSS Makes Dialog Content Different in Firefox vs. Chrome

I have a code snippet of a jQuery Dialog which renders differently in Firefox and Chrome. I know it is a CSS issue and I was think the documentation specifies that the ui-dialog-content and ui-widget-content would be responsible but I am clearly misunderstanding something.
The example is:
<html>
<head>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<style>
body {font-size: 8pt; font-weight: normal;}
span {font-size: 8pt; font-weight: normal;}
.ui-dialog-content {font-weight: normal; }
.ui-widget-content {font-weight: normal;}
</style>
</head>
<body>
Sample text at 8pt...<br/>
Line 1:<br/>
Line 2:<br/>
Line 3:<br/>
<input type="button" value="show" onclick="$('#divTest').dialog()"/>
<div id="divTest" style="width: 700px; height: 400px; display: none;" title="Test">
Why is this text bold?<br/>
Line 1:<br/>
Line 2:<br/>
Line 3:<br/>
</div>
</body>
</html>
In Firefox I find the dialog's content bold-faced which is unwanted. In Chrome I find the content normal-faced but the line spacing has been increased to about 2.
I have tried to over ride the UI content classes but to no avail. Can someone make a suggestion?
Thanks.
I found the answer by using Chrome's developer tools and Firefox's Firebug tool. jQuery UI themes override some of the settings. I was able to identify the CSS that was being overridden by studying the effective styling for each element after the jQuery UI dialog box was displayed.
The CSS I used to correct the display of the dialog content text, and input and select fields is:
.ui-widget input, .ui-widget select {font-family: arial; padding: 0px 0px;}
.ui-dialog-content {font-weight: normal; line-height: normal; font-family: arial; font-size: 8pt; }
.ui-widget-content {font-weight: normal; line-height: normal; font-family: arial; font-size: 8pt;}
I hope this saves someone a few minutes.

Categories