SELECT Placeholder without multiple attribute


Topic: SELECT Placeholder without multiple attribute

szaiftamas pro premium priority asked 3 years ago

I want to use data-mdb-placeholder on SELECT. It doesn't work without the multiple attribute.

<html lang="en">
  <head>
      <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>Material Design for Bootstrap</title>
      <!-- Font Awesome -->
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
      <!-- Google Fonts Roboto -->
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
      <!-- MDB -->
      <link rel="stylesheet" href="../mdb5/css/mdb.min.css" />
  </head>
  <body>
      <select class="select" data-mdb-placeholder="Example placeholder">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
      </select>
  </div>
      <!-- MDB -->
      <script type="text/javascript" src="../mdb5/js/mdb.min.js"></script>
  </body>
</html>

enter image description here


Dawid Wajszczuk staff answered 3 years ago

Hi,

Try adding <option value="" hidden></option> as first option. Single Select displays first option (if it has value) by default instead of placeholder. But if you provide option without the value, the placeholder will be displayed. Here is the snippet: https://mdbootstrap.com/snippets/standard/d-wajszczuk/3290625.

Keep coding,
Dawid


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: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: N/A
  • Browser: Firefox
  • OS: Ubuntu 20.04
  • Provided sample code: No
  • Provided link: No