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.
Related
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"
I added a dropdown menu to my bootstrap4 navbar, but the dropdown menu exceeds the page by quite a bit (on the right side).
I tried applying a few things I saw on google like adding dropdown-menu-left or drop-left but both haven't worked for me. The only thing that works at the moment is applying margin-right to the element but that's not what I want since it ruins the format of my navbar.
https://imgur.com/a/jpCWi3e
My html
<!-- right side -->
<ul class="navbar-nav ml-auto">
#if (isset($_SESSION['user_data']))
<!-- Dropdown -->
<li class="nav-item dropdown" style="right: 0;">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
{{$_SESSION['user_data']->username}}
</a>
<div class="dropdown-menu dropleft">
<a class="dropdown-item" href="{{ url('/servers') }}">Manage servers</a>
<a class="dropdown-item" href="{{ url('/logout') }}">Logout</a>
</div>
</li>
#else
#endif
</ul>
Have you tried dropdown-menu-right on your dropdown-menu ?
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="{{ url('/servers') }}">Manage servers</a>
<a class="dropdown-item" href="{{ url('/logout') }}">Logout</a>
</div>
Here's a fiddle for that (try to enlarge the preview window if you see the mobile layout).
Is it what you're looking for?
See bootstrap4 documentation for more details on menu alignment
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/
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
I have been using the bootstrap dropdown code as a template and it has been working until now. I have made sure every thing is up to date and now all my dropdowns are not working.
I have tried pasting the bootstrap code directly on my site and it still doesnt work. I updated my theme and now its broken.
It was working for weeks and now has stopped working.
<button class="btn btn-secondary dropdown mb-4" type="button" id="modelDropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="float-left" id="current-model">Finish</span>
<span class="float-right"><i class="fas fa-sort-down"></i></span>
</button>
<div class="model-filter dropdown-menu" aria-labelledby="modelDropdownMenuButton">
<a class="dropdown-item all-models" href="#">Finish</a>
<a class="dropdown-item" href="#">Paint</a>
<a class="dropdown-item" href="#">Stain</a>
</div>
I want the dropdown to open when clicked
It was an issue with the popper.js. I just had to add the popper.js line before closing the body.
Does anyone know why this would have been effected on an update?