Home Ask Login Register

Developers Planet

Your answer is one click away!

mp3por February 2016

Why is the arrow not showing?

I am trying to use the bootstrap thing but can't seem to be able to create a simple dropdown button.

Here is the code:

  <div class="btn-group">
    <button type="button" class="btn btn-primary">Choose phobia</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      {% for phobia in phobia_list %}
      <a class="dropdown-item" href="{% url 'android:phobia_detail' phobia.id %}">{{phobia.name}}</a> {% endfor %}
    </div>
  </div>

and how I load bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

and here is the result

enter image description here

Answers


Bubblesphere February 2016

Change the two buttons to one that looks like this:

<button type="button" class="btn btn-primary dropdown-toggle" 
 data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Choose phobia <span class="caret"></span>
</button>


mp3por February 2016

For future reference -> the working solution:

  <div class="btn-group">
    <button type="button" class="btn btn-primary">Choose phobia</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      <span class="sr-only">Toggle Dropdown</span>
      <span class="caret"/>
    </button>
    <ul class="dropdown-menu">
      {% for phobia in phobia_list %}
      <li><a class="dropdown-item" href="{% url 'android:phobia_detail' phobia.id %}">{{phobia.name}}</a></li>
      {% endfor %}
    </ul>
  </div>

Post Status

Asked in February 2016
Viewed 2,925 times
Voted 9
Answered 2 times

Search




Leave an answer


Quote of the day: live life