input problem

Caio Maselli asked 9 months ago

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?


gaurav soni commented 9 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.


Mikołaj Smoleński commented 9 months ago

Please describe Your problem in the Angular Support Section. Regards


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 commented 9 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 9 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">
<!-- 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>


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

Regards


Caio Maselli commented 9 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


Jakub Strebeyko commented 9 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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No