Dropdown does not find the target

Asked

Viewed 33 times

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 doesn’t open. Does anyone have any idea?

css twitter-bootstrap material-design

  • If I’m not mistaken, you have to initialize with javascript, there is no?

  • What version of bootstrap

1 answer

0


You’re using more than one dropdown, you should group each one into one 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>

The data-target is used with modal, not dropdown. Remove them from 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>
<link rel="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>

<div class="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>

Don’t forget that the dropdown requires popper.js.

Browser other questions tagged css twitter-bootstrap material-design

You are not signed in. Login or sign up in order to post.