input problem

MDB SupportCategory: MDB jQueryinput problem
Caio Maselli asked 6 months ago in MDB pro, version:4

Hi

I have a problem, my inputs are below the label tag and this is making access to the click event  difficult. You can only click the input when you click outside of what is written on the label

How can I solve this?

Mikołaj Smoleński replied 6 months ago

Please describe Your problem in the Angular Support Section. Regards

gaurav soni replied 6 months ago

I have the same problem , i am using the angular version. When click on the label , the label does not get the “active” class. I have to click the blank space of the input filed to activate it.

3 Answers
Mikołaj Smoleński answered 6 months ago

Hello,

Is there the same behavior in our documentation: https://mdbootstrap.com/components/inputs/ ?

If not, please copy here part of Your code with inputs.

Regards

Caio Maselli replied 6 months ago

Hi Mikolaj

Thanks for your response, but the documentation input behavior is different.

the code is the same apparently. I'm using the small input

Here is a part of the code that is in error. I'm testing Chrome Browser only..

 

Caio Maselli answered 6 months ago
Start your code here

<!DOCTYPE html>
<html lang=”en”>

<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<meta http-equiv=”x-ua-compatible” content=”ie=edge”>
<title>Material Design Bootstrap</title>
<!– Font Awesome –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”&gt;
<!– Bootstrap core CSS –>
<link rel=”stylesheet” href=”../../css/bootstrap.min.css”>
<!– Material Design Bootstrap –>
<link rel=”stylesheet” href=”../../css/mdb.min.css”>

<!– Your custom styles (optional) –>
<style>

</style>
</head>

<body class=”fixed-sn white-skin”>
<div class=”container mt-5″>
<div class=”row”>
<div class=”col-12″>
<div class=”md-form form-sm”>
<input type=”text” id=”form1″ class=”form-control”>
<label for=”form1″ class=””>Example label</label>
</div>
<div class=”md-form form-sm”>
<input type=”text” id=”form1″ class=”form-control”>
<label for=”form1″ class=””>Example label</label>
</div>
<div class=”md-form form-sm”>
<input type=”text” id=”form1″ class=”form-control”>
<label for=”form1″ class=””>Example label</label>
</div>
</div>
</div>
</div>

<!– SCRIPTS –>
<!– JQuery –>
<script src=”../../js/jquery-3.2.1.min.js”></script>
<!– Bootstrap tooltips –>
<script type=”text/javascript” src=”../../js/popper.min.js”></script>
<!– Bootstrap core JavaScript –>
<script type=”text/javascript” src=”../../js/bootstrap.js”></script>
<!– MDB core JavaScript –>
<script type=”text/javascript” src=”../../js/mdb.min.js”></script>
<!–Custom scripts–>
<script>
// SideNav Initialization
$(“.button-collapse”).sideNav();

var container = document.querySelector(‘.custom-scrollbar’);
Ps.initialize(container, {
wheelSpeed: 2,
wheelPropagation: true,
minScrollbarLength: 20
});

// Material Select Initialization
$(document).ready(function() {
$(‘.mdb-select’).material_select();
});
</script>
</body>

</html>

Mikołaj Smoleński answered 6 months ago

Your example is working correctly. Do You have any errors in console (F12)?

Regards

Jakub Strebeyko replied 6 months ago

Hi there Caio,

The error is caused by trying to initialize a SideNav‘s .custom-scrollbar within the <script> tags with no .custom-scrollbar element in place.

With Best Regards,
Kuba

Caio Maselli replied 6 months ago

This is the error in Console

Uncaught TypeError: Cannot read property ‘classList’ of null
at Object.n.add (mdb.min.js:1)
at Object.e.exports [as initialize] (mdb.min.js:1)
at Index.aspx:451