Material Contact Form: Options not displayed for class mdb-s


Topic: Material Contact Form: Options not displayed for class "mdb-select" (Pro - jQuery)

christopherbirwin pro asked 6 years ago

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>


Marta Szymanska staff pro premium answered 6 years ago

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


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
  • 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