Dropdown does not find the target

Question

Dropdown does not find the target

Navigation

#1 by (0 votes)

1

<button data-toggle="dropdown" data-target="#teste" class="btn btn-blue-grey btn-lg btn-group" mat-button>Configurações <i class="fa fa-caret-down" aria-hidden="true"></i><br><i class="fa fa-cog mr-1" aria-hidden="true"></i></button>
    <div id="teste" class="dropdown-menu animated fadeIn" >
        <a class="dropdown-item waves-effect" href="#">Cadastro de Operadores</a>
    </div>

<button data-toggle="dropdown" data-target="#dropdownteste" class="btn btn-blue-grey btn-lg btn-group" mat-button>Produtos <i class="fa fa-caret-down" aria-hidden="true"></i><br><i class="fa fa-cog mr-1" aria-hidden="true"></i></button>
    <div id="dropdownteste" class="dropdown-menu animated fadeIn">
        <a class="dropdown-item" href="#">Tipo de Produtos</a>
        <a class="dropdown-item" href="#">Produtos</a>
    </div>

My dropdown does not open. Anyone have any ideas?

css twitter-bootstrap material-design

asked by anonymous 16.07.2018 / 22:57

1 answer

sqlldr sql loader oracle insert file name in a column Doubt about declaring a class with if (! class_exists) in PHP

score 0 · Accepted Answer

You are using more than one dropdown, you should group each one within a container as a div :

<div>
   <button data-toggle="dropdown" class="btn btn-blue-grey btn-lg btn-group" mat-button>
      Configurações <i class="fa fa-caret-down" aria-hidden="true"></i>
      <br>
      <i class="fa fa-cog mr-1" aria-hidden="true"></i>
   </button>
   <div class="dropdown-menu animated fadeIn" >
      <a class="dropdown-item waves-effect" href="#">Cadastro de Operadores</a>
   </div>
</div>
<div>
   <button data-toggle="dropdown" class="btn btn-blue-grey btn-lg btn-group" mat-button>
      Produtos <i class="fa fa-caret-down" aria-hidden="true"></i>
      <br>
      <i class="fa fa-cog mr-1" aria-hidden="true"></i>
   </button>
   <div class="dropdown-menu animated fadeIn">
      <a class="dropdown-item" href="#">Tipo de Produtos</a>
      <a class="dropdown-item" href="#">Produtos</a>
   </div>
</div>

data-target is used with modal, not with dropdown. Remove them from the buttons.

If you want the buttons side by side, use the class .btn-group :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><linkrel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><divclass="btn-group">
   <button data-toggle="dropdown" class="btn btn-blue-grey btn-lg btn-group" mat-button>
      Configurações <i class="fa fa-caret-down" aria-hidden="true"></i>
      <br>
      <i class="fa fa-cog mr-1" aria-hidden="true"></i>
   </button>
   <div class="dropdown-menu animated fadeIn" >
      <a class="dropdown-item waves-effect" href="#">Cadastro de Operadores</a>
   </div>
</div>
<div class="btn-group">
   <button data-toggle="dropdown" class="btn btn-blue-grey btn-lg btn-group" mat-button>
      Produtos <i class="fa fa-caret-down" aria-hidden="true"></i>
      <br>
      <i class="fa fa-cog mr-1" aria-hidden="true"></i>
   </button>
   <div class="dropdown-menu animated fadeIn">
      <a class="dropdown-item" href="#">Tipo de Produtos</a>
      <a class="dropdown-item" href="#">Produtos</a>
   </div>
</div>

Do not forget that the dropdown requires popper.js .