How to make materializecss dropdown appear below selectbox?

Question

I am using materilizecss and i have the following dropdown:

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

I was initilizing it like so:

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

But what i wanted was the dropdown to show below the selectbox not above , so i added the below line of code:

$("select").not('[multiple="multiple"]').formSelect({
           belowOrigin: true
     });

But even this does't seem to work , What option can i add so that the dropdown menu shows below the select box ?

Answer 1

Use This :

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

Instead of :

$("select").not('[multiple="multiple"]').formSelect({
      belowOrigin: true
});

JSFiddle

Actually with dropdownOptions you can pass dropdown options to select form.