Okay, so when I follow the directions here for getting started with Materialize CSS, my input form always turns out like this:
My current index.html file is this:
<!DOCTYPE html>
<html>
<head>
<title>IRS</title>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="node_modules/materialize-css/css/ghpages-materialize.css">
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="node_modules/materialize-css/js/materialize.js"></script>
</head>
<body>
<div class="input-field">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
</body>
</html>
My electron version is 1.6.6 and node is at 6.10.3
Add "active" class to the tag and try
<div class="input-field">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name" class="active">First Name</label>
</div>
if you want only label animation, remove the placeholder for the <input> tag
Hope it works..
For anyone else with issues using materialize css with electron, here is how to get it to work the right way:
<script type="text/javascript" src="js/hammer.min.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
The issue is materialize.min.js is requiring hammer.min.js so you need to add it to your project and call it before materilize.min.js
Related
as i followed the official docs of flatpickr in this link for some reason the date picker didn't appear
here is what i did
i added this in my html head:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
and this in my js file
import flatpickr from "flatpickr";
flatpickr("#myflatpickr", {});
in the html body where i have the input:
<input name="deadline" placeholder="Deadline" id="myflatpickr" required>
You can move it after the element is present in the DOM indeed as Paul T said. Or add a on document ready function to it. Couldn't reproduce the error message you've got.. Maybe just leave out the import/require part?:
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
</head>
<body>
<div><input name="deadline" placeholder="Deadline" id="myflatpickr" required></div>
<script type="text/javascript">
flatpickr("#myflatpickr", {});
</script>
</body>
</html>
I want to use JQuery and JSEncrypt in my Thymeleaf Page.
From researching I've found that I can achieve this with including the .js files of the libs that are saved in my /static/js/ folder of the spring boot application.
I get the following error:
FolderTree:
My HTML looks like this:
<html ..>
..
..
<link href="../static/css/layout.css" th:href="#{css/layout.css}" rel="stylesheet" type="text/css"/>
<script type="text/javascript" th:src="#{js/jquery-3.5.1.min.js}"></script>
<script type="text/javascript" th:src="#{js/jsencrypt.min.js}"></script>
<script type="text/javascript">
function encryptPw() {
var encPw = $('#password').val();
console.log(encPw);
}
</script>
</head>
<body>
<form ...>
...
...
<p>
<label for="password" class="login-hidden-label">Passwort</label>
<input type="password" id="password" name="password" class="login-input-field" placeholder="Passwort" required>
</p>
<button class="login-accept-button" onclick="encryptPassword()" type="submit">Anmelden</button>
</body>
</html>
Solved this by allowing all Requests in the spring web security for
/js/**
in my antMatchers.
httpSecurity.antMatchers("/js/**").permitAll();
fixes it.
I would like to use a pdfform.js library(package) within react app. I have tried by using the npm pdfform but no luck.
Any help is much appreciated.
https://github.com/phihag/pdfform.js
Here is a working demo, maybe it will help you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>pddform.js demo</title>
<link rel="stylesheet" href="https://phihag.github.io/pdfform.js/docs/demo.css" />
</head>
<body>
<div class="error"></div>
<form class="url_form">
<div>Upload a PDF form file: <label><input type="file" name="file" /></label></div>
<label>or download one: <input type="text" size="40" value="Spielberichtsbogen_2BL.pdf" name="url" /><button role="submit">Download</button></label>
</form>
<form class="cur_file"></form>
<form class="lib_form">
PDF library:
<label><input type="radio" name="pdflib" value="minipdf" checked="checked" />minipdf</label>
<label><input type="radio" name="pdflib" value="pdf.js" />PDF.js</label>
</form>
<form class="fill_form"><button class="fill" disabled="disabled">Fill and download PDF</button></form>
<form class="list_form">
</form>
<div class="loading">Loading (this may take a while since PDF.js is gigantic)</div>
<!-- In a real-life scenario, you want to chose EITHER minipdf (smaller) -->
<script src="https://phihag.github.io/pdfform.js/minipdf.js"></script>
<!-- .. OR pdf.js (huge, but better compatibility).
pdf.worker.js is slightly modified to export the actual classes we care about -->
<script src="https://phihag.github.io/pdfform.js/customlibs/pdf.worker.js"></script>
<script src="https://phihag.github.io/pdfform.js/minipdf_js.js"></script>
<!-- pako and pdfform.js are required either way -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.3/pako.min.js" integrity="sha256-X7u/eQo6oIgWqc5jOmTjQn3loM8Lse0ock76Gkkn/Ro="
crossorigin="anonymous"></script>
<script src="https://phihag.github.io/pdfform.js/pdfform.js"></script>
<!-- FileSaver.js is just needed for the demo, although you'll probably use it in some form as well -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.0.0/FileSaver.min.js"></script>
<script src="https://phihag.github.io/pdfform.js/docs/demo.js"></script>
</body>
</html>
I have existing asp.net pages using bootstrap datepickers.
I need it now in a simple html page, so I copied the related link and script lines from the asp.net project into a bare minimum html file.
The datepicker never shows, and I have no idea what is wrong with it. I have looked aroud and searched the web for examples, but did not find out why it does not work.
Here's a little test file:
<html>
<head>
<title>datepicker test</title>
<link href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datetimepicker({
format: "dd-MMM-yyyy"
});
})
</script>
</head>
<body>
<form>
<div class="input-append date" id="datepicker">
<input size="16" type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
</form>
</body>
</html>
Please advise,
TIA,
Guido
You misspelled the function to call the datepicker. It's
$("#datepicker").datepicker({
format: "dd-MMM-yyyy"
});
And you typed 'dateTIMEpicker'
I am trying to get search up and running on my website. Right now the search either does nothing or spinner endlessly spins and nothing loads or I get "ERROR LOADING PAGE." I feel that this may be due to a jquery and jquery mobile conflict.
jquery.min.js is version 1.11.1
jquery mobile is 1.4.3
Hope you can help!
Here is the index.html
<!DOCTYPE HTML>
<html>
<head>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQueryMobile -->
<script src="js/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" data-theme='b'>
<div class="block">
<form action="search.html">
<input type="text" name="q" id="tipue_search_input" autocomplete="off">
</form>
</div>
</div>
</body>
</html>
This is the search.html (as it states to do in tipue docs)
<!DOCTYPE HTML>
<html>
<head>
<title>TEST</title>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQueryMobile -->
<script src="js/jquery.mobile.min.js"></script>
<script type="text/javascript" src="tipuesearch/tipuesearch_set.js"></script>
<script type="text/javascript" src="tipuesearch/tipuesearch_content.js></script>
<link rel="stylesheet" type="text/css" href="tipuesearch/tipuesearch.css">
<script type="text/javascript" src="tipuesearch/tipuesearch.js"></script>
</head>
<body>
<div data-role="page" data-theme='b'>
<div data-role="content">
<div class="block" ><form action="search.html">
<input type="text" name="q" id="tipue_search_input" autocomplete="off" required placeholder="Enter manufactuer or part number" >
</form>
</div> </div>
<div id="tipue_search_content"></div>
</div>
<script>
$(document).ready(function() {
$('#tipue_search_input').tipuesearch({
'show': 6
});
});
</script>
</body>
</html>
In case anyone is wondering this was simply a slight lack of JQM experience. Disabling ajax on the form solved the problem ()