How to fix dropdown not displaying on click? [duplicate] - html

This question already has answers here:
Bootstrap 4 popper is undefined
(2 answers)
Closed 3 years ago.
I'm creating a static website with HTML, but the CSS framework was built for me via a free theme builder. Now it's time for me to implement the framework successfully. I'm using Bootstrap Builder with their documentation to form my CSS, and from there adding additional content I need. I'm trying to add a dropdown in my Navbar, but for some reason the example they give me isn't working, but their demo/example does. I've copied their code line-for-line and haven't been able to get the example to even work. The sample code I share below is for a button dropdown, the only difference is using the btn class, but the code otherwise is exactly the same for a Navbar dropdown.
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#dropdownMenuLink" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown link</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
I expect that when I click on the dropdown, the items listed would display in a ... well... dropdown.
Expected results:
Untoggled/Not Clicked and
Toggled/Clicked, without the green square around it obviously.

Twitter bootstrap uses javascript for few components. In the case of dropdowns it uses popper.js so if you want to make the dropdown work you will need to add popperjs script. It is documented here.
https://getbootstrap.com/docs/4.0/getting-started/introduction/#js
also all components which are JS dependent are listed in this link.

At First Please Check your CDN order Whether you added the CDNS Appropiately or not
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button"
id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">Dropdown link</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
If Everything okay just remove the link reference from
<a class="btn btn-secondary dropdown-toggle" href="#" role="button"
id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">Dropdown link</a>
It will work fine.Hope It helps you

Related

Dropdown menu not working in razor page .Net6 mvc app

I made a dropdown menu using bootstrap. It works perfectly fine when I load an HTML file in VScode. But it does not work when I use the same dropdown markup in .NET6 MVC app's .cshtml file. By "does not work" I mean when I click on dropdown arrow, dropdown menu does not appear.
Note: I have verified all required bootstrap files are linked.
Here is the markup below:
<div class="dropdown text-end ms-4 me-1">
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle" style="font-size: 2rem;"></i>
</a>
<ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1" style="">
<li><a class="dropdown-item" href="#">My Orders</a></li>
<li><a class="dropdown-item" href="#">Address</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
This problem was caused as the default link to local files of bootstrap was also added. Hence, my layout page was linking to both bootstrap CDN and defaulted bootstrap link when the MVC app is created. I removed the link to local bootstrap file that solved the problem.

Dropdown menu not showing the listed elements when hovered

For some reason this dropdown menu is not showing the listed elements when hovered. Using bootstrap.
Am I missing something here? Maybe it's something simple but I just cannot see it.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Services -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Rewiring</a>
<a class="dropdown-item" href="#">Light Fixes</a>
<a class="dropdown-item" href="#">Showers</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Rewiring</a>
<a class="dropdown-item" href="#">Light Fixes</a>
<a class="dropdown-item" href="#">Showers</a>
</div>
</li>
In Bootstrap, dropdown runs by default on mouse click, if you want to show dropdown on mouse hover then you have to use css or js
I have used css
.dropdown:hover ul.dropdown-menu{ display: block; }
.dropdown:hover ul.dropdown-menu{ display: block; }
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Services
</button>
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Rewiring</a></li>
<li><a class="dropdown-item" href="#">Light Fixes</a></li>
<li><a class="dropdown-item" href="#">Showers</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Rewiring</a></li>
<li><a class="dropdown-item" href="#">Light Fixes</a></li>
<li><a class="dropdown-item" href="#">Showers</a></li>
</ul>
</div>
More things to talk about here:
Opening dropdown in BS is done by Popper.js (which is not part of bootstrap.min.js). So in order to make dropdown working, you need to load Bootstrap JS via bundle, where Popper.js is included
https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js
Since you are using BS5, you need to change data-toggle="dropdown" to data-bs-toggle="dropdown". That is new markup from version 5 onwards.
As mentioned in another answer, opening dropdown on click (and not hover) is core part of BS philosophy (unfortunately). So in case you want to open submenu on hover, additional CSS has to be added.
Also be careful with the markup. It would be more clean to use the structure recommended by BS for the navigation (using <ul>, <li>, etc.)
change <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>
to
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"> Dropdown button </button>
Change it to a button then it shoud work!!
I have found the solution:
This was the line causing trouble.
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>
I simply just added the following via Bootstrap:
aria-haspopup="true" aria-expanded="false"

how to make function for entire html class in angular

is there a chance to make function for whole class, not to add it to each line. in my case class="dropdown-item" for each link with this class i want to have same function
<li class="nav-item dropdown primary">
<a class="nav-link links-bar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Eyes
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a *class="dropdown-item" (click)="selectChangeLink($event)"* id="14">Eye Pencil</a>
<a class="dropdown-item" (click)="selectChangeLink($event)" id="13">Mascara</a>
<a class="dropdown-item" (click)="selectChangeLink($event)" id="12">Eye Brow</a>
<a class="dropdown-item" data-value="4">Eye Lashes</a>
<a class="dropdown-item" data-value="5">Eye Liner</a>
<a class="dropdown-item" data-value="6">Eye Shadow</a>
You can use a directive. If the selector of the directive is in the way .className it's applied to all the elements with this directive. e.g. (*)
#Directive({
selector:'.dropdown-item'
})
export class DropDownItemDirective{
#HostListener('click',['$event']) click(event:any){
console.log(this.elementRef.nativeElement.getAttribute("data-value"))
//or
console.log(event)
}
constructor(private elementRef:ElementRef){}
}
But, any way. You can also use an array variable and use *ngFor in your app, some like
dataArray=[{id:14,label:'Eye Pencil'},{id:13,label:'Mascara',{id:12,label:'Eye brow']
<a *ngFor="let item of dataArray"
class="dropdown-item" (click)="selectChangeLink($event)"
[id]="item.id">{{item.label}}</a>
(*)Don't forget import in your module

problem when I use mdbootstrap dropdown in angular

I have an angular project without JQuery library. I want to use mdbootstrap dropdown for angular.
I used codes in page:
https://mdbootstrap.com/docs/angular/components/dropdowns/
I copied and paste its html code like this:
<div class="btn-group" mdbDropdown>
<button mdbDropdownToggle type="button" mdbBtn color="primary" class="dropdown-toggle waves-light"
mdbWavesEffect>
Basic dropdown
</button>
<div class="dropdown-menu dropdown-primary">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="divider dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
but the when I click in button, the menu is not shown.
Please check that you have added a proper jQuery CDN it may also caused by that if not please check this site in details https://mdbootstrap.com/docs/angular/components/demo/

Having difficulty in moving Nav bar to the left using bootstrap4

Hi everyone i have a code for nav-bar and i want to move it to the left side of
the form, its staying on the right side of the form,
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle " type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button
</button>
<div class="dropdown-menu " aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
i have tried using floating to the left and using align-left it's still staying on the right side of the form what alternative can solve this issue?/ Thank you.
Kindly update your whole HTML page with navbar code. As running the code you have given is showing on left side of the browser.
Take a look: