Topic: Material Contact Form: Options not displayed for class "mdb-select" (Pro - jQuery)
I'm using the latest Pro version 4.5.14 and jQuery. The Material Contact Form doesn't display any options in the drop-down list, which is <select> class mdb-select. I did a search of the mdb.min.css file for "mdb-select" and the class was not found. Code for the full HTML page follows.
Material Contact Form
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<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>Contact</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!--Google Fonts-->
<link href='https://fonts.googleapis.com/css?family=Asap' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Asap+Condensed' rel='stylesheet'>
<!-- Customized Styles -->
<link href="css/sp0-custom.css" rel="stylesheet">
</head>
<body>
<!--MAIN SECTION-->
<main>
<div class="container-fluid">
<!-- Material Contact Form -->
<div class="card">
<h5 class="card-header info-color white-text text-center py-4">
<strong>
contact us
</strong>
</h5>
<!--Card content-->
<div class="card-body px-lg-5 pt-0">
<!-- Form -->
<form class="text-center" style="color: #757575;">
<!-- Name -->
<div class="md-form mt-3">
<input type="text" id="materialContactFormName" class="form-control">
<label for="materialContactFormName">
name
</label>
</div>
<!-- E-mail -->
<div class="md-form">
<input type="email" id="materialContactFormEmail" class="form-control">
<label for="materialContactFormEmail">
email
</label>
</div>
<!-- Subject -->
<span>
subject
</span>
<select class="mdb-select">
<option value="" disabled>
Choose option
</option>
<option value="1" selected>
Feedback
</option>
<option value="2">
Report a bug
</option>
<option value="3">
Feature request
</option>
<option value="4">
Feature request
</option>
</select>
<!--Message-->
<div class="md-form">
<textarea type="text" id="materialContactFormMessage" class="form-control md-textarea" rows="3"></textarea>
<label for="materialContactFormMessage">
Message
</label>
</div>
<!-- Send button -->
<button class="btn btn-primary" type="submit">
Send
</button>
</form>
<!-- /Form -->
</div>
</div>
<!-- /Material Contact Form -->
</div>
<!--/MAIN CONTAINER-->
</main>
<!--/MAIN SECTION-->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!-- 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>
Hi,
please copy your code and create a snippet showing the problem here: https://mdbootstrap.com/snippets/. Describe your issue in details and I'll help you.
Best,
Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.10
- Device: Desktop, laptop, iPhone
- Browser: Chrome, IE, Firefox
- OS: Windows 7, Windows 8.1, iOS 12.1
- Provided sample code: Yes
- Provided link: Yes