Semantics UI : Dropdown not expanding

Question

I am using semantics ui library for a small project and I am facing a problem with the dropdown of the library. I am trying to implement a simple dropdown using semantics UI. But the thing is, it is not expanding when I am clicking it. I cannot see the dropdown options.

Here is the code. Some help will be appreciated.

<head>
    <script type="text/javascript" src="js-lib/semantic.min.js"></script>
    <script type="text/javascript" src="js-lib/jquery-1.10.2.min.js"></script>

    <link rel="stylesheet" href="css/semantic.css" type="text/css" />
    <link rel="stylesheet" href="css/style.css" type="text/css" />


    <script>
$('.ui.dropdown')
  .dropdown()
;
    </script>

</head>

<body background="backgrounds/bg.jpg" style="background-repeat:no-repeat">
    <div class="ui selection dropdown">
      <input type="hidden" name="gender">
      <div class="default text">Gender</div>
      <i class="dropdown icon"></i>
      <div class="menu">
        <div class="item" data-value="1">Male</div>
        <div class="item" data-value="0">Female</div>
      </div>
    </div>
</body>

</html>

Here is the link to the demo page :

http://meetup.2fh.co/workspace/register.html

Could you show us your problem in a jsfiddle.net or in a codepen.io? — Fabian Mebus, Dec 06 '14 at 17:01
Did you look at the browser console? That should be your first stop when troubleshooting a website. The following error says quite a bit about your problem: `Uncaught ReferenceError: jQuery is not defined` — isherwood, Dec 06 '14 at 18:15
Solved. jQuery 1.10.2.min.js was not compatible with semantics UI. Used the 2.1.1 and everything works perfectly! — Priyabrata, Dec 07 '14 at 04:44

score 1 · Answer 1 · answered Jul 06 '16 at 17:38

1

You should try this out, cause JQuery cannot work on elements that are not properly created.

$(document).ready(function(){
            console.log("TEST");
            $('.ui.dropdown').dropdown();
        });

answered Jul 06 '16 at 17:38

Norman Joya

38
1
5

score 0 · Answer 2 · answered Dec 06 '14 at 17:05

0

Either move your script below the menu markup or wrap the function in document.ready. jQuery cannot act on elements that don't yet exist.

$(function() {
    $('.ui.dropdown').dropdown();
});

answered Dec 06 '14 at 17:05

isherwood

58,414
16
114
157

I tried putting it in document.ready(). But that doesn't help. – Priyabrata Dec 06 '14 at 17:36
Then, as Fabian suggested above, we'll need a demo. There's not enough here to work with. – isherwood Dec 06 '14 at 17:45

score 0 · Answer 3 · answered Jul 14 '16 at 17:13

0

Yo need to put fisrt jQuery

    <script type="text/javascript" src="js-lib/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js-lib/semantic.min.js"></script>

answered Jul 14 '16 at 17:13

Yuri Cano

31
2

Semantics UI : Dropdown not expanding

3 Answers3