CODEWITHSUNDEEP
javascriptjqueryhtmlcsssemantic-ui
WCMC
WCMC

Reputation: 1791

Semantic UI doesn't work at all

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.. enter image description here

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

Upvotes: 2

Views: 4955

Answers (2)

sajjad
sajjad

Reputation: 696

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>

Upvotes: 2

WCMC
WCMC

Reputation: 1791

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

Upvotes: 0

Related Questions