I have problem with materialize collapsible and date picker. Collapsible is not even opening on click and the date picker too. Date picker placed in Personal details - collapsible item. Someone please help me to fix collapsible and date picker.
Check: Placements App
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Placements MGIT</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<!-- If CDN not available, loading JQuery from Server-->
<script>
if (!window.jQuery) {
document.write('<script src="/js/jquery.min.js"><\/script>');
}
</script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="/js/materialize.min.js"></script>
</head>
<body>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo right">MGIT Placements</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">M</i></a>
<ul class="left hide-on-med-and-down">
<li class="active"><a href="#">Login</a></li>
<li><a href="/student_reg">Register</a></li>
<li><a href="#">Upcoming</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li class="active"><a href="/">Home</a></li>
<li><a href="/student_lgn">Login</a></li>
<li><a href="/student_reg">Register</a></li>
<li><a href="#">Upcoming</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="row">
<div class="student-profile">
<div class="col l8 offset-l2 m10 offset-m1">
<ul class="collapsible" popout" data-collapsible="accordion">
<li>
<div class="collapsible-header">Pefrsonal Info</div>
<div class="collapsible-body">
<div id="personal">
<div class="card black-text">
<div class="input-field col s12 m4 l4">
<input type="text" id="firstname" />
<label for="firstname">First Name:</label>
</div>
<div class="input-field col s12 l4 m4">
<input type="text" id="lastname" />
<label for="lastname">Last Name:</label>
</div>
<div class="input-field col s12 l4 m4">
<input type="text" id="surname" />
<label for="surname">Surname:</label>
</div>
<div class="input-field col s12 m6 l6">
<input type="text" id="father" />
<label for="father">Father Name:</label>
</div>
<div class="input-field col s12 l6 m6">
<input type="text" id="mother" />
<label for="mother">Mother Name:</label>
</div>
<div class="input-field col s12 m6 l6">
<input type="date" class="datepicker" />
</div>
</div>
</div>
</div>
</li>
<li>
<div class="collapsible-header">Academics Info</div>
<div class="collapsible-body"> Acaademics Should be here</div>
</li>
<li>
<div class="collapsible-header">Change Password</div>
<div class="collapsible-body">Password Change Shoule be here</div>
</li>
<li>
<div class="collapsible-header">View Data </div>
<div class="collapsible-body" id="dynamicdata">View Data</div>
</li>
</ul>
</div>
</div>
</div>
<style type="text/css">
<style type="text/css">
body {
background-color: #FCFCFC;
}
nav{
background-color: #33597C;
}
.updates{
position: absolute;
padding: 20px;
background: transparent;
}
marquee{
padding: 20px;
}
.vline{
width: 1px;
position: absolute;
background-color: orange;
}
.vline.medium{
top: initial;
height: 420px;
}
.small-login{
padding: 20px;
}
.login-fields{
padding: 20px;
}
h6{
color: #33597C;
}
h2 {
color: grey;
}
/* #4A6787 ; #33597C; */
.login-bg {
margin-top: 5%;
}
#message {
color: red;
margin: 20px;
}
#lgn_btn{
top: 20px;
background-color: #33597C;
width: 60%;
}
/* label focus color */
.input-field input[type=text]:focus + label {
color: #1A237E;
}
/* label underline focus color */
.input-field input[type=text]:focus {
border-bottom: 1px solid #1A237E;
box-shadow: 0 1px 0 0 #1A237E;
}
/* label focus color */
.input-field input[type=password]:focus + label {
color: #1A237E;
}
/* label underline focus color */
.input-field input[type=password]:focus {
border-bottom: 1px solid #1A237E;
box-shadow: 0 1px 0 0 #1A237E;
}
</style>
<script type="text/javascript">
jresp = '{% autoescape off%}{{jresp}}{% endautoescape%}';
resp = JSON.parse(jresp);
rollno = resp['rollno'];
details = resp['data'];
var update = document.getElementById('dynamicdata')
for (keys in details) {
update.innerHTML += "<b>"+keys[0].toUpperCase()+keys.slice(1).toLocaleLowerCase()+": </b>"+details[keys]+"<br />"
}
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 15,
});
$(".button-collapse").sideNav();
$(document).ready(function () {
$('.collapsible').collapsible({
accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});
});
</script>
</body>
</html>
Well, after reading code, debugging and Googling I am able to fix the problem.
First thing - Materialize Collapsible.
Clicking on collapsible header, display property of collapsible body is not changing.
So, adding display property for the element collapsible body, will fix the problem.
collapsible-body{
display: block;
}
` Second thing - Materialize DatePicker
On Chrome, it is not responding to mouse clicks. But, responding to space button.
So, to fix this issue, I just added a bit of JQuery code as shown below.
Date Picker HTML Code
<div class="input-field col s12 m6 l6">
<label for="dob">Date of Birth:</label>
<input id="dob" type="text" class="datepicker" />
</div>
and mouse click event that triggers...
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 40,
min: new Date(1990,0,1),
max: new Date(2000,11,31),
closeOnSelect: true,
});
$("#dob").click(function (event) {
event.stopPropagation();
$(".datepicker").first().pickadate("picker").open();
});
Here, you can see the working materialize date picker...
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 40,
min: new Date(1990, 0, 1),
max: new Date(2000, 11, 31),
closeOnSelect: true,
});
$("#dob").click(function(event) {
event.stopPropagation();
$(".datepicker").first().pickadate("picker").open();
});<head>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
</head>
<body>
<div class="input-field">
<label for="dob">Date of Birth:</label>
<input id="dob" type="date" class="datepicker" />
</div>
</body>