drop down alignment issues-CodePudding

I have 3 bootstrap drop down elements. The first 2's toggle are not being controlled by jquery but the 3rd one is getting hidden and shown using jquery. Now the problem is when I click on the first 2 dropdown buttons their menus will show aligned correctly but the 3rd one has problems. The first problem it has is that its menu won't show on the first click when you click it the second time the menu will show. The second problem it has is, the position of the menu of the 3rd dropdown is not right. It appears on the wrong position but once you scroll on the body the position gets fixed. I did some debugging and found out that when removing the other 2 drop down elements the 3rd dropdown works fine and the second problem is fixed. I don't get what the problem is all I did is control its toggle with jquery. How can I fix these problems? Thanks in advance.

$(function() {
  $(".account button").click(function() {
    $(".account .dropdown-menu").toggle();
  });
});

.header {
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  column-gap: 4%;
  width: 100%;
  height: 20vh;
  background-color: gold;
}

.header .dropdown {
  border: none;
}

.header .dropdown button:focus {
  box-shadow: none;
}

.header .dropdown.account ul{
    transform: translate(0px, 40px) !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<div >
  <div >
    <button  type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i ></i>
                    </button>
    <ul >
      <li><a >option 1</a></li>
      <li><a >option 2</a></li>
      <li><a >option 3</a></li>
    </ul>
  </div>
  <div >
    <button  type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i ></i>
                    </button>
    <ul >
      <li><a >option 1</a></li>
      <li><a >option 2</a></li>
      <li><a >option 3</a></li>
    </ul>
  </div>
  <div >
    <button  type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i ></i>
                    </button>
    <ul >
      <li><a >option 1</a></li>
      <li><a >option 2</a></li>
      <li><a >option 3</a></li>
    </ul>
  </div>
</div>

CodePudding user response：

Dude Check if this is working for you.

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 4%;
  width: 100%;
  height: 20vh;
  background-color: gold;
}

.header .dropdown {
  border: none;
}

.header .dropdown button:focus {
  box-shadow: none;
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dropdown</title>
    
    <!-- CSS -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  </head>
  <body>
    <div >
     <div >
    <button  type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i ></i>
                    </button>
    <ul >
      <li><a >option 1</a></li>
      <li><a >option 2</a></li>
      <li><a >option 3</a></li>
    </ul>
  </div>
  <div >
    <button  type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i ></i>
                    </button>
    <ul >
      <li><a >option 1</a></li>
      <li><a >option 2</a></li>
      <li><a >option 3</a></li>
    </ul>
  </div>
  <div >
    <button  type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i ></i>
                    </button>
    <ul >
      <li><a >option 1</a></li>
      <li><a >option 2</a></li>
      <li><a >option 3</a></li>
    </ul>
  </div>
</div>
    
    <!-- Js -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </body>
</html>

CodePudding user response：

No need to add that JavaScript code. Check it will work properly without that.

CodePudding user response：

Check this Example transform: translate(0px, 40px) add in this class header .dropdown.account ul it is working fine now.

$(function() {
  $(".account button").click(function() {
    $(".account .dropdown-menu").toggle();
  });
});

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 4%;
  width: 100%;
  height: 20vh;
  background-color: gold;
}

.header .dropdown {
  border: none;
}

.header .dropdown button:focus {
  box-shadow: none;
}

.header .dropdown.account ul{
      transform: translate(0px, 40px) !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<div >
  <div >
    <button  type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i ></i>
                    </button>
    <ul >
      <li><a >option 1</a></li>
      <li><a >option 2</a></li>
      <li><a >option 3</a></li>
    </ul>
  </div>
  <div >
    <button  type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i ></i>
                    </button>
    <ul >
      <li><a >option 1</a></li>
      <li><a >option 2</a></li>
      <li><a >option 3</a></li>
    </ul>
  </div>
  <div >
    <button  type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i ></i>
                    </button>
    <ul >
      <li><a >option 1</a></li>
      <li><a >option 2</a></li>
      <li><a >option 3</a></li>
    </ul>
  </div>
</div>

CodePudding user response：

Then you can add this CDN. It will solve the issue.

<script
   src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p"
      crossorigin="anonymous">
</script>

CodePudding user response：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p"
      crossorigin="anonymous"
    ></script>
<style>
.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 4%;
  width: 100%;
  height: 20vh;
  background-color: gold;
}

.header .dropdown {
  border: none;
}

.header .dropdown button:focus {
  box-shadow: none;
}

.header .dropdown.account ul{
      transform: translate(0px, 40px) !important;
}
</style>
<script>
$(document).ready(function(){
  $(".btn btn-secondary").click(function(){
    $(".dropdown-menu").toggle();
  });
});
</script>
</head>
<body>

<div >
  <div >
    <button  type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i ></i>
                    </button>
    <ul >
      <li><a >option 1</a></li>
      <li><a >option 2</a></li>
      <li><a >option 3</a></li>
    </ul>
  </div>
  <div >
    <button  type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i ></i>
                    </button>
    <ul >
      <li><a >option 1</a></li>
      <li><a >option 2</a></li>
      <li><a >option 3</a></li>
    </ul>
  </div>
  <div >
    <button  type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i ></i>
                    </button>
    <ul >
      <li><a >option 1</a></li>
      <li><a >option 2</a></li>
      <li><a >option 3</a></li>
    </ul>
  </div>
</div>

</body>
</html>

Check, it's working.