I have a dropdown in Navbar at right side, when I click on it, its menus are opening far right even not visible until I scroll horizontally.
This is my code
<nav >
<div >
<div style="margin-bottom: 0px;" >
<a href="#">
<img width="100" src="assets/Acc_logo.png" alt="logo">
</a>
</div>
<div >
<button data-toggle="dropdown" type="button"
aria-haspopup="true" id="dropdownMenuButton" aria-expanded="false">
<div ></div>
<div ></div>
<div ></div>
</button>
<ul aria-labelledby="dropdownMenuButton">
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
</ul>
</div>
</div>
</nav>
also some css added
li {
list-style-type: none;
}
.divIcom {
width: 30px;
height: 3px;
background-color: gray;
margin: 6px 0;
}
.dropdown-toggle::after {
display:none;
}
Styles I am using in angular.json
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/bootstrap-icons/font/bootstrap-icons.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/umd/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"./node_modules/chart.js/dist/Chart.min.js"
]
},
Edit 1 -
zone.js:1711 Uncaught TypeError: i.createPopper is not a function
at Mt._createPopper (node_modules\bootstrap\dist\js\bootstrap.min.js:6:23961)
at Mt.show (node_modules\bootstrap\dist\js\bootstrap.min.js:6:22277)
at Mt.toggle (node_modules\bootstrap\dist\js\bootstrap.min.js:6:22073)
at HTMLButtonElement.<anonymous> (node_modules\bootstrap\dist\js\bootstrap.min.js:6:26705)
at HTMLDocument.s (node_modules\bootstrap\dist\js\bootstrap.min.js:6:4456)
at _ZoneDelegate.invokeTask (zone.js:406:31)
at Zone.runTask (zone.js:178:47)
at ZoneTask.invokeTask [as invoke] (zone.js:487:34)
at invokeTask (zone.js:1661:18)
at globalCallback (zone.js:1704:33)
How can I fix it ?
CodePudding user response:
Adding dropdown-menu-sm-end
seems to work fine for 5.2
:
li {
list-style-type: none;
}
.divIcom {
width: 30px;
height: 3px;
background-color: gray;
margin: 6px 0;
}
.dropdown-toggle::after {
display: none;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>li {
list-style-type: none;
}
.divIcom {
width: 30px;
height: 3px;
background-color: gray;
margin: 6px 0;
}
.dropdown-toggle::after {
display: none;
}</style>
<h1>Hello, world!</h1>
<nav >
<div >
<div style="margin-bottom: 0px;" >
<a href="#">
<img width="100" src="assets/Acc_logo.png" alt="logo">
</a>
</div>
<div >
<button data-bs-toggle="dropdown" type="button" aria-haspopup="true" id="dropdownMenuButton" aria-expanded="false">
<div ></div>
<div ></div>
<div ></div>
</button>
<ul aria-labelledby="dropdownMenuButton">
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>
edit
try removing extra code, it's probably causing conflicts, leave only bundle (maybe jquery also if you're not using it elsewhere), try this::
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"./node_modules/chart.js/dist/Chart.min.js"
]
CodePudding user response:
change this dropdown-menu-sm-right
to dropdown-menu-right dropdown-menu-sm-left