Semantic UI doesn't work at all

Question

I know I must missed something because none of the example of works in my computer.

Take the simplest first example at the website.

I copied the code AS IS and it doesn't work at all for me. I included the semantic.min.css and semantic.min.js also just in case I included the jQuery using google CDN.

Following is my html code.

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>

</head>
<body>


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



<div class="ui 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="male">Male</div>
    <div class="item" data-value="female">Female</div>
  </div>
</div>



</body>
</html>

The output is like this..

Thank you! I am pretty new to JavaScript and semantic UI.

sajjad · Accepted Answer · 2016-05-14 10:21:10Z

2

i use this order of linking js files and work fine

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
  <script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="../bower_components/semantic/dist/semantic.min.css">
  <script src="../bower_components/semantic/dist/semantic.min.js"></script>
</head>
<body>


<select name="gender" class="ui dropdown" id="select">
  <option value="">Gender</option>
  <option value="male">Male</option>
  <option value="female">Female</option>
</select>


<script type="text/javascript">
  $('#select')
    .dropdown()
  ;
</script>
</body>
</html>

answered May 14, 2016 at 10:21

sajjad

6961 gold badge10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TheIcemanCometh Over a year ago

I have been having this problem as well, and this fixed it for me.

WCMC · Accepted Answer · 2016-05-13 22:18:47Z

0

I need to include jQuery before including .js and .css

answered May 13, 2016 at 22:18

WCMC

1,8515 gold badges24 silver badges36 bronze badges

Collectives™ on Stack Overflow

Semantic UI doesn't work at all

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related