Topic: Problem with select input
Hey Guys,i've created a material select like in the docs but the menu don't open. I only get this error message:
Uncaught TypeError: Cannot read property 'setAttribute' of null
at Object.onLoad (popper.min.js:4)
at popper.min.js:4
at Array.forEach (<anonymous>)
at new t (popper.min.js:4)
at c.t.toggle (bootstrap.min.js:6)
at HTMLInputElement.<anonymous> (bootstrap.min.js:6)
at HTMLInputElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLInputElement.y.handle (jquery-3.3.1.min.js:2)
onLoad @ popper.min.js:4
(anonymous) @ popper.min.js:4
t @ popper.min.js:4
t.toggle @ bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6
dispatch @ jquery-3.3.1.min.js:2
y.handle @ jquery-3.3.1.min.js:2
How can i fix this?
Edit:
<head>
...
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mdb.min.css" rel="stylesheet">
</head>
<body>
...
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/mdb.min.js"></script>
<script type="text/javascript" src="js/modules/material-select.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.mdb-select').materialSelect();
});
</script>
</body>
Hi there,
As I can see from your error logs the problem is not connected with our mdb.js script, but with other scripts. Please, try to reproduce the issue in our snippets editor or check all imported files in your project.
https://mdbootstrap.com/snippets/
Best regards
Christian Raoulis pro priority vip early access commented 2 years ago
The snipplet is works as it should.
I've imported the bootstrap.min.css and the mdb.min.css in my head tag and on the end of my body tag the jquery-3.4.1.min.js, popper.min.js, bootstrap.min.js, mdb.min.js and material-select.js
Did I forgot something?
Here's the right scripts order. Please compare it with your configuration:
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
Before body closing tag:
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.4.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.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
Best regards
Christian Raoulis pro priority vip early access commented 2 years ago
I ordered it like that, but the problem still exists.
Mikołaj Smoleński staff commented 2 years ago
Are You able to import any other component? Please try to use some other components and we'll see if the problem is connected with the files imported to your project.
Christian Raoulis pro priority vip early access commented 2 years ago
I've reinstalled all components. Now it works. :)
Thanks :D
Mikołaj Smoleński staff commented 2 years ago
Good to hear that. Good luck with new projects ;)
Answered
- User: Pro
- Premium support: No
- Technology: jQuery
- MDB Version: 4.8.5
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes