input problem

Topic: input problem

Caio Maselli free asked 6 years 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 pro commented 6 years 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 staff commented 6 years ago

Please describe Your problem in the Angular Support Section. Regards

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 1 Best answer

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

Caio Maselli free commented 6 years 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 staff commented 6 years 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

Add comment

Caio Maselli free answered 6 years ago

0 0 Best answer

<pre>Start your code here

</pre>
<!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>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="../../css/bootstrap.min.css">

<link rel="stylesheet" href="../../css/mdb.min.css">

<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>

<script src="../../js/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="../../js/popper.min.js"></script>

<script type="text/javascript" src="../../js/bootstrap.js"></script>

<script type="text/javascript" src="../../js/mdb.min.js"></script>

<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>

Please insert min. 20 characters.

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>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">  <link rel="stylesheet" href="../../css/bootstrap.min.css">  <link rel="stylesheet" href="../../css/mdb.min.css">  <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>   <script src="../../js/jquery-3.2.1.min.js"></script>  <script type="text/javascript" src="../../js/popper.min.js"></script>  <script type="text/javascript" src="../../js/bootstrap.js"></script>  <script type="text/javascript" src="../../js/mdb.min.js"></script>  <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>

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 0 Best answer

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 free commented 6 years 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..

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Caio Maselli

10Support score
1Questions 1Answers 0Snippets