mdb select not appearing - pro version - Material Design for Bootstrap

Topic: mdb select not appearing - pro version

Shanmugham Sundaram pro asked 6 years ago

HI - I have purchased mdb pro version of Bootstrap. I am using this pro version on a angular 6 project with cli. I have issue with mdb-select, I have copied all css,js,font and img folders to assets folder of angular project, and have added entries in the angular.json file as follows:

"assets": [

"src/favicon.ico",

"src/assets/pro/css/",

"src/assets/pro/img/",

"src/assets/pro/font/",

"src/assets/pro/js/",

"src/assets/pro/js/modules/",

"src/assets/pro/js/addons/"

in the index file i have added all the required css and js files as follows:

<!DOCTYPE html>

<head>

<basehref="/">

<metacharset="utf-8">

<metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no">

<metahttp-equiv="x-ua-compatible"content="ie=edge">

<title>Material Design Bootstrap Template</title>

</head>

<body>

<app-root></app-root>

</div>

$(document).ready(function () {

$('#sidebarCollapse').on('click', function () {

$('#sidebar').toggleClass('active');

$(this).toggleClass('active');

});

$('.mdb-select').material_select();

});

</script>

// Animations initialization

newWOW().init();

</script>

</body>

</html>

but I never see the select control on the browser.. Can you please help here and point to right direction to using this control

Sebastian Kaczmarek staff pro premium commented 6 years ago

Does your select control has mdb-select class? Also, can you confirm that mdb.min.css is loaded on the page?

Shanmugham Sundaram pro commented 6 years ago

Yes it has all requried - mdb-select class added mdb.min.css as well.. and gets loaded when I view the page source

Add comment

ppulfer pro answered 6 years ago

0 0 Best answer

Same here: Console Error:

jquery-3.3.1.min.js:2 jQuery.Deferred exception: $(...).material_select is not a function TypeError: $(...).material_select is not a function
at HTMLDocument.<anonymous> (https://HOST/:86:18)
at l (https://HOST/js/jquery-3.3.1.min.js:2:29375)
at c (https://HOST/js/jquery-3.3.1.min.js:2:29677) undefined

Shanmugham Sundaram pro commented 6 years ago

I did not get this error. But can MDB support can answer whats is wrong in using this select control of JQuery variant in an angular project?? am I missing something ???

Add comment

Sebastian Kaczmarek staff pro premium answered 6 years ago

0 0 Best answer

I think it can be caused by Angular lifecycle hooks. You are calling .material_select() as soon as the index.html is served, while your actual <select> control is rendered after this function call- in <app-root>. Try calling $('.mdb-select').materialSelect() on OnInit or AfterViewInit hook. At this time your <select> element is already rendered and you can call .materialSelect() on it to render it properly. Also, if you want to implement MDB into your Angular project I would kindly recommend you to use MDB Angular. It is created to be used with Angular and is much easier to use in Angular project than MDB jQuery.

Shanmugham Sundaram pro commented 6 years ago

Hi Thanks for the response. since I have purchased Jquery version, can I still use the pro version of Angular? or should it be another new purchase? Please clarify Thanks.

Sebastian Kaczmarek staff pro premium commented 6 years ago

If you want to have both Angular and jQuery versions available you need to make two purchases. But if you would like to switch from jQuery to Angular version of MDB please reach our customer support at f.kapusta@mdbootstrap.com

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Open

Specification of the issue

User: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: 4.5.10
Device: laptop
Browser: chrome,firefox,opera
OS: MAC
Provided sample code: Yes
Provided link: No

Shanmugham Sundaram

Pro User

5Support score
1Questions 0Answers

0Snippets likes 0Snippets