CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
pynovice
pynovice

Reputation: 7752

Twitter bootstrap dropdown not working?

I have looked into every threads in stackoverflow but couldn't solve my issue. Here's my head element:

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}bootstrap/css/bootstrap.css" />
        <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}bootstrap/css/custom.css" />
        <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}bootstrap/css/bootstrap-responsive.css" />


        <!-- Javascript imports-->

        <script src="{{ STATIC_URL }}js/jquery.js" type="text/javascript"></script>
        <script src="{{ STATIC_URL }}bootstrap/js/bootstrap.js" type="text/javascript"></script>
        <script src="{{ STATIC_URL }}bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="{{ STATIC_URL }}bootstrap/js/bootstrap-carousel.js" type="text/javascript"></script>
        <script src="{{ STATIC_URL }}bootstrap/js/bootstrap-dropdown.js" type="text/javascript"></script>
        <script src="{{ STATIC_URL }}bootstrap/js/bootstrap-tab.js" type="text/javascript"></script>
        <script src="{{ STATIC_URL }}bootstrap/js/bootstrap-scrollspy.js" type="text/javascript"></script>



        <title>Rank Analyzer</title>
        <meta name="author" content="zurelsoft" />
        <!-- Date: 2013-07-18 -->
    </head>

I am calling dropdown in body like this:

<div class="btn-group">
         <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i>test</a>
         <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
            <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
            <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
            <li class="divider"></li>
            <li><a href="#"><i class="i"></i> Make admin</a></li>
        </ul>
        </div>

The dropdown is not showing up. Am I missing something?

Upvotes: 1

Views: 15781

Answers (4)

Sujit Y. Kulkarni
Sujit Y. Kulkarni

Reputation: 1386

I placed jquery.js above bootstrap.js and worked for me. If in case this helps..

Upvotes: 2

LeftyX
LeftyX

Reputation: 35587

It must work. Check this fiddle.
It seems to me that you're trying to include your bootstrap library twice.

<script src="{{ STATIC_URL }}bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

Why don't you just use this library: http://twitter.github.io/bootstrap/assets/js/bootstrap.js or it's minified version: http://twitter.github.io/bootstrap/assets/js/bootstrap.min.js which would include all the components.

As an alternative you can include every single twitter bootstrap component (as they do in their page) but you cannot include the full package library.

<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/bootstrap-affix.js"></script>

Upvotes: 2

PaoloCargnin
PaoloCargnin

Reputation: 442

Have you initialize the dropdown? 

$('.dropdown-toggle').dropdown()

the html structure of the dropdown menu

<div class="dropdown">
  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Upvotes: 5

HarrisonC
HarrisonC

Reputation: 39

Try this. You might want to restructure the code.

<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><i class="icon-user icon-white"> Test <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
              <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
              <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
              <li class="divider"></li>
              <li><a href="#">Make Admin</a></li>
            </ul>
          </div>

Upvotes: 0

Related Questions