I don't really understand, when I launch my html page on local the dropdown menu doesn't work.
I tried to copy/paste my html code on bootply and its work! Incredible ...
http://bootply.com/90610
Any idea ?
I don't want to include all js file, just necessary file for dropdown (dropdown.js)
I didn't really know what I should try ...
If any one can help me It will really appreciate it.
Thank you
Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.
In your case you have overflow:hidden on . row which holds the menu and therefore the dropdown menu will never show because it overflows the container. For the element called . row that holds the menu you will need to use another clearing mechanism instead of overflow:hidden.
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision. Dropdowns are built on a third party library, Popper.
To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. The . caret class creates a caret arrow icon (), which indicates that the button is a dropdown.
The way i got it working First
npm install --save bootstrap@3
this will create all bootsrap dirs for css and js
then i added globally in my project /projectname/angular.json
Added these lines to add css and js
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/bootstrap/dist/js/npm.js"
]
make sure your index.html file does not directly import any conflicting .js files
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With