Semantic-ui: [Bug, Dropdown] Dropdown does not work

Created on 7 Oct 2018 · 3Comments · Source: Semantic-Org/Semantic-UI

[Dropdown] Dropdown should work when Click it

Steps

Include the dropdown css in the html as below

<body>
  <div class="top-bar">...</div>
  <div class="content">
    <div class="left">
      <!-- other components -->
      <div class="bottom">
        <div class="ui selection dropdown">
          <input type="hidden" name="gender">
          <i class="dropdown icon"></i>
          <div class="default text">Gender</div>
          <div class="menu">
          <div class="item" data-value="1">Male</div>
          <div class="item" data-value="0">Female</div>
        </div>
      </div>
    </div>
  </div>
</body>

Expected Result

When click the dropdown, it works.

Actual Result

It does not work and the click function dose not bind to it.

Version

Semantic 2.4

Solution

It seems that the click function should manually bind to dropdown. And it works with the following code.

window.onload = function(){
    $('.ui.dropdown').dropdown();
};

Summary

Don't know why with deeper html structure, the dropdown could not work. Hope it could be fixed.

Source

xwy27

👍3

Most helpful comment

Only the simple DropDown works without Javascript:
https://semantic-ui.com/modules/dropdown.html#simple

<div class="ui compact menu">
  <div class="ui simple dropdown item">
    Dropdown
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item">Choice 1</div>
      <div class="item">Choice 2</div>
      <div class="item">Choice 3</div>
    </div>
  </div>
</div>

lubber-de on 7 Oct 2018

👍3

All 3 comments

This is misleading from the manual. Your code always needs the initialization via javascript.

lubber-de on 7 Oct 2018

👍2

Only the simple DropDown works without Javascript:
https://semantic-ui.com/modules/dropdown.html#simple

<div class="ui compact menu">
  <div class="ui simple dropdown item">
    Dropdown
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item">Choice 1</div>
      <div class="item">Choice 2</div>
      <div class="item">Choice 3</div>
    </div>
  </div>
</div>

lubber-de on 7 Oct 2018

👍3

Only the simple DropDown works without Javascript:
https://semantic-ui.com/modules/dropdown.html#simple

<div class="ui compact menu">
  <div class="ui simple dropdown item">
    Dropdown
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item">Choice 1</div>
      <div class="item">Choice 2</div>
      <div class="item">Choice 3</div>
    </div>
  </div>
</div>

Thanks! I didn't see that.

xwy27 on 8 Oct 2018

❤2

Was this page helpful?

0 / 5 - 0 ratings