CODEWITHSUNDEEP
semantic-ui
Phoenix
Phoenix

Reputation: 445

Dropdown in Semantic UI is not working on Mobile

The problem I'm having only occurs in Mobile. Note that I'm using simple dropdown as well.

I look all the threads related to that, but cannot figure out why the menu does not work.

See the code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Semantic-UI Issue</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.css" />
</head>
<body>
<div class="ui fixed inverted menu">
    <div class="ui container">
        <a href="https://reactgirl.github.io/portifolio/index.html" class="item">Home</a>
        <div class="ui simple dropdown item">
            Menu <i class="dropdown icon"></i>
            <div class="menu">
                <a class="item" href="https://reactgirl.github.io/portifolio/about.html">About me</a>
                <div class="divider"></div>
                <a class="item" href="https://github.com/ReactGirl/portifolio/blob/master/about.html">This Code</a>
                <a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues/6465">Semantic UI issue</a>
            </div>
        </div>
    </div>
</div>
<div style='padding: 100px 0 0 30px'>
  <div>Example page to show a semantic UI issue with the dropdown on mobiles: The dropdown does not open!</div>
  <div class="ui padded segment">From the docs: "A simple dropdown can open <a href="https://semantic-ui.com/modules/dropdown.html">without Javascript."</a></div>


  <div><strong>The menu dropdown issue was reproduced on the following Mobiles:</strong></div>
  <li>iPhone X.  Browsers: Safari, Chrome.</li>
  <li>iPhone 6.  Browsers: Safari, Chrome.</li>
  <div class="ui divider"></div>
  References:
  <div>
    <a href="https://github.com/Semantic-Org/Semantic-UI/issues/6465">Semantic UI GitHub issue</a>
  </div>
</div>
</body>
</html>

Upvotes: 0

Views: 1655

Answers (3)

JeppeBech
JeppeBech

Reputation: 1

My solution was setting Z-index higher on the icon (.dropdown.icon). The icon was unclickable due to being behind the text input.

Upvotes: 0

Diwaker Singh
Diwaker Singh

Reputation: 31

You need to initialize the dropdown. $('.ui.dropdown').dropdown();

Upvotes: 1

Phoenix
Phoenix

Reputation: 445

This is actually a confirmed issue in Semantic-UI.

https://github.com/Semantic-Org/Semantic-UI/issues/6465

Upvotes: 0

Related Questions