I use Material Design with my non-Node.js app. I need to use the Material outlined textfield (with leading icon) in my HTML project. Material.io website shows JavaScript code for some components but does not show it for others. How can I add the outlined textfield component in my HTML project?
Below is my code:
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" />
</head>
<body>
<!--button class="mdc-button mdc-button--raised">Button</button-->
<div class="mdc-text-field mdc-text-field--outlined">
<input type="text" id="tf-outlined" class="mdc-text-field__input" />
<label for="tf-outlined" class="mdc-floating-label">Your Name</label>
<div class="mdc-notched-outline">
<svg>
<path class="mdc-notched-outline__path"></path>
</svg>
</div>
<div class="mdc-notched-outline__idle"></div>
</div>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</body>
</html>
A fiddle for this code: jsfiddle
You really need to go through the documentation at mdc-textfield. Aside from the html fixes you will see below, be sure to notice the JavaScript that instantiates the textfield component (this is often what trips people up when they are trying to get started). You can also use mdc.autoInit() with data-mdc-auto-init markup to instantiate MDC components (see the Auto Init docs for details).
mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material TextField Quick Start</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>
<body>
<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
<i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
<input type="text" class="mdc-text-field__input">
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__notch">
<span class="mdc-floating-label">Label</span>
</span>
<span class="mdc-notched-outline__trailing"></span>
</span>
</label>
</body>
</html>
The MDL Docs themselves have resources on how to include the components just using the standard <link> and <script> tags.
Docs:
https://material.io/develop/web/docs/getting-started/
Related
When I'm running the HTML on android, chrome is not loading the external CSS and js files, all the files are in the same folder. Repo
Beginner here.
Html
<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>Palindrome Checker</title>
<link rel="stylesheet" href="/pali.css">
<!-- Before <link rel="stylesheet" href="pali.css">
also tried <link rel="stylesheet" href="./pali.css"> -->
</head>
<body>
<h1>Palindrome Checker</h1>
<div class="main">
<div class="holder">
<div class="bgimg">
<span>Type in here-</span>
<input type="text" name="textin" label ="textin" id="Udt1" placeholder="Eg-Racecar">
<button class="btn" onclick="tex()">Check</button>
</div>
</div>
<span class="anshold"><p id="udans"> </p>
</span>
</div>
</body>
<script src="/palindrome.js"></script>
</html>
use ./ to your css link, not /,
ex:
./pali.css
If the files are in the same folder like you said, the slash isn't necessary - simply <link rel="stylesheet" href="pali.css"> and <script src="palindrome.js"></script>. If that doesn't work, I would also advise looking for spelling errors in the filenames.
I am looking at working with Foundation controls in ASP.Net Core. The controls which use JavaScript don't work - they don't produce errors but they don't do things like move or drop down. The other controls work fine.
Here is the source of one of them. I have added all the JavaScript libraries though some may be referenced by others. The control is displayed but does not move.
I don't know what is missing unless the code needs to be wrapped in other tags.
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/Content/foundation.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
</head>
<body>
<div class="slider" data-slider data-initial-start="50" data-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
<input type="hidden">
</div>
<script src="/Scripts/jquery-3.4.1.js"></script>
<script src="/Scripts/foundation.js"></script>
<script src="/Scripts/plugins/foundation.core.js"></script>
<script src="/Scripts/plugins/foundation.slider.js"></script>
<script src="/Scripts/plugins/foundation.util.motion.js"></script>
<script src="/Scripts/plugins/foundation.util.triggers.js"></script>
<script src="/Scripts/plugins/foundation.util.keyboard.js"></script>
<script src="/Scripts/plugins/foundation.util.touch.js"></script>
<script src="/Scripts/plugins/foundation.accordionMenu.js"></script>
<script src="/Scripts/plugins/foundation.util.nest.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
fixed. The issue was that I should have just linked to foundation.js. However, the "no-js" is not needed but you have to add the "$(document).foundation();" into your source file just before the tag as I have above.
I have been messing around with HTML code in glitch.com, and I'm wondering, how do I make someone enter an input and make that input be saved so it can be seen by him or other people, kinda like a message, and is there a way to log it using JavaScript's console.log() even though I'm using HTML?
I tried creating variables and using console.log() using JavaScript.
JavaScript code:
console.log("logging function started");
let msg = prompt('Send message', "Enter text here");
alert(`${msg} has been sent!`);
console.log(msg + "has been sent!")
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/script.js" defer></script>
</head>
<body>
<h1>input test</h1>
<form>
Student Name:<br> <input type="text" name="name">
<br>
Student Subject:<br> <input type="text" name="subject">
<br>
Rank:<br> <input type="text" name="rank">
</form>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
Note: When I tried creating variables and using console.log(), nothing showed up in logs.
Move your <script> tag to the bottom of your <body> tag.
See also this answer: https://stackoverflow.com/a/5329895/1651980
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
</head>
<body>
<h1>input test</h1>
<form>
Student Name:<br> <input type="text" name="name">
<br>
Student Subject:<br> <input type="text" name="subject">
<br>
Rank:<br> <input type="text" name="rank">
</form>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
<!-- import the webpage's javascript file -->
<script src="/script.js" defer></script>
</body>
</html>
I wish to use x-editable and bootstrap-datetimepicker on the same page, but not on the same element. When doing so, however, the css required for x-editable (bootstrap-editable.css) corrupts bootstrap-datetimepicker, and it looks like the first image below instead of the desired second image. Note that x-editable's JavaScript has not even been included on the page, thus it must be just the bootstrap-editable.css.
To troubleshoot, I used Chrome's and Firefox's inspector to see what CSS is applied, however, when drilling down in the element tree, the JavaScript generated div.bootstrap-datetimepicker-widget automatically closes which prevent's the Chrome dev-tools from being able to view the CSS which is applied to it.
How can the CSS which is applied to this element be determined so that some sort of fix be created?
https://jsbin.com/yanawuv
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.css" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/eonasdan-bootstrap-datetimepicker#4.17.47/src/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</body>
</html>
I'm trying to just run the Angular Material grid layouts demo that can be found here titled Flex Percent Values.
Excerpts from my HTML code is as follows:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1" />
<!-- LINK TO LOCAL BUT HOW? -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc4/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="../../../bower_components/angular-material/modules/css/angular-material-layouts.css">
<base href="/">
</head>
<body data-ng-app="MyApp" data-ng-controller="MainCtrl">
<div layout="row" layout-wrap>
<div flex="30">
[flex="30"]
</div>
<div flex="45">
[flex="45"]
</div>
<div flex="25">
[flex="25"]
</div>
<div flex="33">
[flex="33"]
</div>
<div flex="66">
[flex="66"]
</div>
<div flex="50">
[flex="50"]
</div>
<div flex>
[flex]
</div>
</div>
<div ng-view></div>
<!-- Angular Material Dependencies -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.11.2 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.js"></script>
When I add Material Angular elements like md-button they render, although anything layout related doesn't work. I've double checked that I'm importing all the stylesheets I need, and I think I am. I'm not sure what's wrong though.
You're linking to the CSS stylesheet of the 1.0.0-rc4 version but you're loading the scripts of the 0.11.2 version...
I'm pretty sure that this is the problem!