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

Mikołaj Smoleński staff answered 6 years ago


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

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

Mikołaj Smoleński staff answered 6 years 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 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..  


Please insert min. 20 characters.

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
Tags