I am new to MVC. I have been trying to resolve the issue now for 2 days non-stop (yes 48 hours) on my own before reaching out for help. But for some reason I cannot get the scripts for my bootstrap project to work. I have tried everything I can possibly try so any help is appreciated. I am using Bootstrap v4.60 and have jqueryv3.6 in my VS2019 project.
My Partial Bundle
bundles.Add(new Bundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new Bundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.bundle.js")); /*This comes bundled with popper */
My Partial Layout
<head>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
</head>
<div class="container">
#RenderBody()
</div>
.
.
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/popper")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
The dropdown in my navbar does not work and I am quite certain I've done everything I have been told to do
Navbar dropdown toggle
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<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="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
What am I missing?
Related
I want to make a dropdown which is clickable also. Like I have a menu which has dropdown options so If I hover on it, will display dropdown and if I want to click on that, it should display link that has been provided to it.
This is the HTML:
<ul class="navbar-nav ml-auto nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="mainservice.html" id="navbarDropdown" role="button" aria-expanded="false"> Logistics Services </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="ftl.html">FTL</a>
<a class="dropdown-item" href="ltl.html">LTL</a>
<a class="dropdown-item" href="intermodal.html">Intermodal</a>
</div>
</li>
</ul>
So, now I want that if I click on Logistics Services then mainservice.html page should display and dropdown should also be there. It should be mobile friendly also.
I tried through CSS, but when I checked it on mobile, then it is not working as expected.
ul.nav li.dropdown:hover div.dropdown-menu{
display:block;
}
How should I do it?
I notice that bootstrap 5.1.3 data-bs-toggle isn't working anymore. Like in this exemple:
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" datadat-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
If you use the data-bs-toggle="dropdown" it just doens't work. I would like to know if this is happening with you too and why is that? Maybe the version 5.1.3 has some kind of bug?
Here is the bootstrap official page for this NavBar component example:
https://getbootstrap.com/docs/5.1/components/navbar/
There is a typo:
Switch "datadat-bs-toggle" to "data-bs-toggle"
Now I know what I was doing wrong...
While working on my project, I was using a minimal version of bootstrap that my teacher provided me, and he was using it with lower version bootstrap, so data-bs-toggle was not working...
:) thanks for the answers
This question already has answers here:
Bootstrap 4: Multilevel Dropdown Inside Navigation
(7 answers)
Twitter Bootstrap Multilevel Dropdown Menu
(6 answers)
Closed 2 years ago.
I have to wonder why bootstrap does not provide a multilevel dropdown in the top navbar.
https://www.youtube.com/watch?v=jEAeDID1pks
From this video, I could see the exact requirement for me, but implementation somehow fails. It is like some time I could get the working output and sometimes it's not.
I am not very aware of jQuery, but I think this is only possible through jQuery because I searched for a lot of options.
This above picture is the basic top navbar provided by bootstrap. I want another submenu in that dropdown which leads to another submenu.
I need something like above.
https://getbootstrap.com/docs/4.0/components/navbar/
from the above link, I referred to the navbar documentation from bootstrap.
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
This is the code for the basic navbar. I am using angular 7 in my case. I wonder if there any other frameworks which support this requirement in angular 7.
Any ideas what might be causing this error?
List of my includes:
<link rel="stylesheet" href="../../node_modules/semantic-ui/dist/semantic.min.css">
<link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../node_modules/fullcalendar/dist/fullcalendar.min.css">
<script src="../../node_modules/semantic-ui/dist/semantic.min.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../node_modules/moment/min/moment.min.js"></script>
<script src="../../node_modules/fullcalendar/dist/fullcalendar.min.js"></script>
HTML Element:
<div class="ui floating dropdown labeled search icon button" style="width: 95%; margin: 0 auto;" id="monthDrop">
<i class="calendar icon"></i>
<span class="text">Choose a Month</span>
<div class="menu">
<div class="item">January</div>
<div class="item">February</div>
<div class="item">March</div>
<div class="item">April</div>
<div class="item">May</div>
<div class="item">June</div>
<div class="item">July</div>
<div class="item">August</div>
<div class="item">September</div>
<div class="item">October</div>
<div class="item">November</div>
<div class="item">December</div>
</div>
</div>
Script:
$('#monthDrop').dropdown();
It renders fine and everything and no errors on load, just this when I try to click on it:
We ran into the same error with the following html:
<select class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" role="button" v-model="selected" aria-haspopup="true" aria-expanded="false">
<option disabled value="">Please select one</option>
<option class="dropdown-item" value="type1">Carrier</option>
<option class="dropdown-item" value="type2">Shipper</option>
</select>
We tried removing data-toggle="dropdown" from the <select> tag; the error no longer occurred, and the dropdown menu still functioned. Not sure why this works, but it got rid of the error for us. Must be a conflict somehow? Anyways, if someone else is looking for a solution, this workaround may work for them.
I got this same error in Bootstrap 4.x because my dropdown menu did not have the same parent as the dropdown button I was using.
<span class="project-sort-by">Sort by: <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</a></span>
<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>
This does not work because the dropdown.js code looks for the menu using this code:
_getMenuElement() {
if (!this._menu) {
const parent = Dropdown._getParentFromElement(this._element)
if (parent) {
this._menu = parent.querySelector(SELECTOR_MENU)
}
}
return this._menu
}
To fix this, move the menu so it has the same parent as the toggle.
<span class="project-sort-by">Sort by:
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</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>
</span>
CSS Frameworks
First of all you have to choose whether you're using Bootstrap 4 or Semantic-UI, because these are two different CSS Frameworks and using both of them is a mess.
Bootstrap 4
Assuming you choose Bootstrap 4 as it's simpler and easier to learn especially for the beginners (but of course you can choose Semantic-UI, Foundation or any other if you'd like) you should have these two scripts inside your code: jQuery and Popper.js.
From Bootstraps Documentation:
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins.
Dropdown
Again, as you can find in docs:
Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.
When you decide which CSS Framework you'd like to use you'll be able to set your Dropdowns in a proper way. Just to have better point of view you should also look into Semantic-UI Documentation about Dropdown.
NodeJS Environment != Browser JavaScript Environment
As I can see you install your scripts through npm, but I'm now sure if it is intended by you. In shorthand:
npm is a package manager for Node.js packages
I'm guessing that what you're trying to do is to have simple versions of these packages just in your local folders like ./project_name/javascript/bootstrap.js or ./project_name/css/bootstrap.min.css and there's no need for you right now to have node_modules. But, again, of course you can have it like this if you'd like.
You can find a lot of useful comments about Node and JavaScript here.
The error happens because you are misplacing the elements. None of the answer above solved for me.
Wrong placement 1
<span class="project-sort-by">Sort by: <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</a></span>
<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>
Wrong placemement 2
<span class="project-sort-by">Sort by:
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</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>
</span>
Right placement
<span class="dropdown project-sort-by">Sort by:
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</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>
</span>
Removing data-toggle="dropdown" did not work for me as Bootstrap 4.x requires that for dropdown menus.
However in a similar issue, I figured that the third party plugin I used had a removed function called removeAttr. When I changed it with prop I worked. No more error.
Keep the semanticUI link below the bootstrap one
<link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../node_modules/semantic-ui/dist/semantic.min.css">
<link rel="stylesheet" href="../../node_modules/fullcalendar/dist/fullcalendar.min.css">
I'm guessing this is an easy problem for most guys. I copied the standard template from the bootstrap website, but the dropdown menu in the navbar isn'topening when I click it. Can someone see why?
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<a
class="navbar-brand"
routerLinkActive="active current"
routerLink="/">
Home
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a
class="nav-link"
routerLinkActive="active current"
routerLink="/shopping-cart">
Shopping Cart
<span
class="caret">
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">User</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">My orders</a>
<a class="dropdown-item" href="#">Manage Orders</a>
<a class="dropdown-item" href="#">Manage Products</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
This problem is most likely caused by the absence of necessary scripts tags. On Bootstrap's website it says under the JS section:
Many of our components require the use of JavaScript to function.
Furthermore, there is a starter template that you can use with the navbar component that you are trying to use.
This provides all necessary references to work with bootstrap correctly.
Let me know if this helps!
As GTown-Coder mentioned, you need to include the jquery scripts and sure bootstrap...
There are two ways. I prefer the following for simplicity
In the index.html at (header should work too, if not include the scripts into the body at last) you must add the 4 lines from Bootstrap (LINK [Its download page of bootstrap 4])
Then your Dropdown should work.
Other way is to install (via npm, LINK) bootstrap, jquery, tether, popperjs and add the script paths to .angular-cli.json -> this can be tricky if there are some missing dependcies.
Are there still problems, let us know!