Why the date-label is on input with Materialize? - html

I am developing a web application with Materialize and I need to use date but the label text is on of the input, How can I resolve it?
It is all the simple code:
<!DOCTYPE html>
<html>
<head>
<!-- Compiled and minified CSS -->
<!-- Compiled and minified JavaScript -->
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!--Import jQuery before materialize.js-->
<div class="input-field col m6">
<i class="material-icons prefix">picture_in_picture</i>
<input id="hello_id" type="date"/>
<label for="hello_id">Hello, this text is a test</label>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
</body>
</html>
Thank you!

Related

JQuery with conflicting datetimepicker and navabr

I have a basic CRUD web app with Spring and thymeleaf, I have a fragmented navbar that I use in each page but whenever I have a page with a datetimepicker the navbar is conflicted (basically navbar parts are mixed up and don't work). So below is my home page, which works fine (no datetimepicker), but in my newEmployees page I have the same bootstrap, jQuery etc links and sources as 'home' but as soon as I add the datetimepicker code the navbar is wrong, also I have to remove:
<script type="text/javascript" src="/js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap.min.js"></script>
for the datetimeicker to work, but with my minimal jquery understanding, isn't that whats is needed for the navbar? Is something conflicting here?
home.html works fine.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/css/fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/navbar.css" >
<link rel="stylesheet" type="text/css" href="/css/ines.css" >
<title>InES Employee</title>
</head>
<body>
<div th:replace="/fragments/chartNavbar :: navbar"></div>
<div class="container">
//all code in the page
</div>
<div th:replace="/fragments/deleteModal :: deleteModal"></div>
<script type="text/javascript" src="/js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap.min.js"></script>
<script th:src="#{/js/home.js}"></script>
</body>
</html>
home.js
$(' #deleteButton').on('click', function(event) {
event.preventDefault();
var href = $(this).attr('href');
$('#deleteModal #delRef').attr('href', href);
$('#deleteModal').modal();
});
setInterval(function(){ $(".alert").fadeOut(); }, 3000);
newEmployee.html cant get navbar to work
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>InES Employee</title>
<link href="/css/fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/navbar.css">
<link rel="stylesheet" type="text/css" href="/css/newEmployee.css">
<!--datetimepicker code-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div th:replace="/fragments/chartNavbar :: navbar"></div>
<div class="container">
//all code in the page
</div>
<!-- <script type="text/javascript" src="/js/jquery-3.6.0.js"></script>-->
<!-- <script type="text/javascript" src="/js/bootstrap/bootstrap.min.js"></script>-->
<script th:src="#{/js/newEmployee.js}"></script>
</body>
</html>
newEmployee.js
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY h:mm A'
});
$('#datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY h:mm A'
});
correct navbar
incorrect navbar
Thanks in advance!

Multi select dropdownlist in bootstrap not displaying dropdown menus

I want to integrate a multiselect dropdown list in my web page. But the list does not show the dropdown menu when click.The dropdown displays its menu if i remove bootstrap.min.css from head tag, but the menus not aligned well.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Money Withdrawal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/css/bootstrap-
select.min.css">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/gijgo#1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo#1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript">
$(function () {
$('.selectpicker').selectpicker();
});
</script>
</head>
<body>
<div class="row">
<div class="col-lg-6 mx-auto">
<label class="text-white mb-3 lead">Where do you live?</label>
<!-- Multiselect dropdown -->
<select multiple="" class="selectpicker" id="exchange_p" tabindex="-98">
<option>BSE</option>
<option>NSE</option>
<option>NCDEX</option>
<option>MCX</option>
<option>NSDL</option>
<option>ICEX</option>
</select>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/bootstrap- select.min.js">
</script>
</body>
</html>

I can't see my D3.js design by open the HTML file

I'm working on d3.js design.
I'm using the python server to see my design by browser.
the problem is I can't see my design by just open the HTML file .
thank you
the index.html file
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>Flag example</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Custom styling -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>x
<!-- Bootstrap grid setup -->
<div class="container">
<div class="row">
<div id="chart-area"></div>
</div>
</div>
<!-- External JS libraries -->
<script src="js/d3.min.js"></script>
<!-- Custom JS -->
<script src="js/main.js"></script>
</body>
</html>

materialize box doesn't open picture when clicked

I'm creating a page using angular 8 with materialize in which i will need to display some pictures, and if the user click on one of them, i want it to open in fullscreen, materialize has a class where you can do it, but when I use it, the image doesn't open
I expected it to open as it opens in this link
https://materializecss.com/media.html
but it doesn't show any reaction to my click
i tried to do like this:
<img src="assets/img/test.png" class="materialboxed">
that's my html page
<div class="container ">
<h1>Materialize Image Gallery</h1>
<div class="row card">
<div class="col s12 m6 l4">
<img src="assets/img/test.png" class="materialboxed">
</div>
<div class="col s12 m6 l4">
<img src="assets/img/test1.png" class="materialboxed">
</div>
<div class="col s12 m6 l4">
<img src="assets/img/test2.png" class="materialboxed">
</div>
</div>
</div>
and this is my index page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test page</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link type="text/css" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
media="screen,projection">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"
type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>
As in your snippets, you didn't initialize the MaterialBox widget as described in the documentation.
Inside your index file, add a script with this JQuery:
$(document).ready(function(){
$('.materialboxed').materialbox();
});
Or you can add a vanilla Javascript:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.materialboxed');
var instances = M.Materialbox.init(elems, options);
});
The final index page file using JQuery should be like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test page</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link type="text/css" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
media="screen,projection">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"
type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
//Added Code
$(document).ready(function(){
$('.materialboxed').materialbox();
//End Added Code
</script>
</body>
</html>
I hope this answer goona help someone.

Importing Bootstrap from CDN, not animating

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Appraisal</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<header>
<h1 class="animated bounceInUp">dummy text</h1>
<hr>
<h4>portfolio</h4>
</header>
<div class="slides">
</div>
<div class="skills">
</div>
<div class="certs">
</div>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I am trying to import Bootstrap from the cdn links provided on the site. I believe I have done everything correctly, however the animations tied to the h1 tag in the header will not animate. Can anyone see anything that is wrong?
The animation you're tying to achieve is with MDBootstrap (Material Design for Bootstrap), and it isn't included with the base Bootstrap files. To use the animation methods you want, include
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/css/mdb.min.css">
after your Bootstrap CSS files, and include
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/js/mdb.min.js"></script>
after your current scripts at the end of the body content. That should be all you need to achieve the animations!
Dynamically generate animations using jQuery
You can also dynamically generate your animations by using the addClass jQuery method:
<script>$(document).ready(function(){ $("h1").addClass("animated bounceInUp"); });</script>
You forgot to import the CDN for Animate.css. Add this into your <head>.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
Your browser is literally seeing animated bounceInUp as
Huh? What is this "animated" and "bounceInUp"? Oi! Developerrrr!? Hello! What are these? - Your browser.
put this code in script tag
wow = new WOW({
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
})
wow.init();
and add this class="wow" in your html component