Hi Xercister, Let me clarify - the problem is material-select dialog not being displayed at all, am I correct? The post's category suggests issues with MDB jQuery version; copying the code into a jQuery-powered repository (except the script tags) results in select working properly. Yet, the code's markup lets one recon about the AngularJS nature of the project. I'd be guessing the problem lies therein. Regards, Kuba

---

So here is what I am doing.

 

Start your code here
<script type="text/ng-template" id="AddClient.html">
 <div class="modal-dialog cascading-modal" role="document">
 <!--Content-->
 <div class="modal-content">
 <!--Header-->
 <div class="modal-header light-blue darken-3 white-text">
 <h4 class="title"><i class="fa fa-user-plus"></i> Add Client</h4>
 <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close" ng-click="Close()">
 <span aria-hidden="true">&times;</span>
 </button>
 </div>
 <!--Body-->
 <div class="modal-body mb-0">
 <form name="formAddClient" ng-submit="addNewClient(formAddClient.$valid)" novalidate>
 <div class="md-form form-sm">
 <div class="col-12 d-flex justify-content-center">
 <div class="col-8">
 <i class="fa fa-user prefix"></i>
 <input type="text" id="defaultForm-cname" class="form-control validate" ng-model="newClient.ClientName" required>
 <label data-error="wrong" for="defaultForm-cname">Client Name</label>
 </div>
 <div class="col-4"></div>
 </div>
 </div>
 <div class="md-form form-sm">
 <div class="col-12 d-flex justify-content-center">
 <div class="col-8">
 <i class="fa fa-user prefix"></i>
 <select class="mdb-select">
 <option value="" disabled selected>Choose your option</option>
 <option value="1">Option 1</option>
 <option value="2">Option 2</option>
 <option value="3">Option 3</option>
 </select>
 <label>Example label</label>
 </div>
 <div class="col-4"></div>
</div>
</div>
<div class="text-center mt-1-half">
<input type="submit" class="btn btn-outline-primary waves-effect" value="Add Client" />
</div>
</form>
</div>
<!--Body-->
</div>
<!--/.Content-->
</div>
</script>

 

I do understand that the item must be initialized and I have done so with the following code. I've moved it all over the place just to make sure that my placement wasn't the problem.

 

Start your code here
 <script>
 // Material Select Initialization
 $(document).ready(function () {
 $('.mdb-select').material_select();
 });
 </script>

---

Hi Xercister,

Thanks for reaching out! Could you provide the code you're working on? I know from experience that the number one reason for material select trouble is its improper initialization or lack of thereof. It's worth noting that MDB CSS hides all select fields by default, to have them initialized in their Material Design form by MDB JS magic - just so you know.

With Best Regards,
Kuba

---