JSFiddle - React, Tailwind, and code Playground

by Bahman ParsaManesh

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
</head>
<body>

<select class="txtInput" data-val="true" data-val-number="The field SelectedAssetCategoryId must be a number." data-val-required="Select a asset category" id="ddlAssetCategory" name="SelectedAssetCategoryId"><option value="">Asset Category</option>
  <option value="1">Disease State/Condition Training</option>
  <option value="5">Hot Topics Training</option>
  <option value="6">Launch Training</option>
  <option value="7">Medical Meetings</option>
  <option value="2">Product Training</option>
  <option value="8">Quiz</option>
  <option value="4">Real World Evidence/HEOR Training</option>
  <option value="3">Treatment/Competitive Landscape Training</option>
</select>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</body>
</html>

CSS

/* ul.dropdown-content.select-dropdown {
  top: 3rem !important;
} */

JavaScript

$("select").not('[multiple="multiple"]').formSelect({
      dropdownOptions: {coverTrigger: false}
});