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
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 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?
I'm working on a small personal project and i have a small issue that i'm not sure how to solve. I use Bootstrap4 , ejs templating engine and express.My project has a Navbar where i show Sign in if user is not signed in and Account in the opposite case.
Here is a relevant part of the Navbar:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto ">
<li class="nav-item navbar-item">
<a class="nav-link" href="/">Home </a>
</li>
<li class="nav-item navbar-item">
<a class="nav-link" href="/">Some link </a>
</li>
<li class="nav-item navbar-item " id="nav-signIn">
<a class="nav-link" href="/signIn">Sign in</a>
</li>
<li class="nav-item dropdown navbar-item" id="nav-account">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Account
</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>
</ul>
</div>
This is the function that controls what to show on the client side:
function displayAccountOrSignIn() {
if (!document.cookie.split(';').filter((item) => item.includes('logedIn=')).length) {
document.querySelector('#nav-account').style.display = 'none'
}
else {
document.querySelector('#nav-signIn').style.display = 'none'
}
}
My problem is that Navbar is 'jerking' because it first loads HTML and then hides what should not be displayed. I can fix it by checking cookies on the server and then conditionally render parts of Navbar, but i don't think it's a good idea to do so. I'd appreciate any suggestions.
There are a number of options here. To know which one to recommend, we'd probably need to play with your actual site and try a few things. All will work and prevent showing something that shouldn't be seen, some may display sooner.
Have all conditional content hidden first (so nothing ever displays that shouldn't) and then enable display of appropriate parts using your conditional Javascript.
Hide the whole toolbar by default in the HTML until you have run your conditional code and then show the whole toolbar only once its state is finalized at the end of your Javascript. If desired, you can make the toolbar be visibility: hidden rather than display: none so that it still takes up the appropriate vertical height and doesn't cause other content to shift down when it is finally displayed.
Run your conditional script inline in an inline <script> tag immediately after the toolbar HTML. This will ensure that the script runs ASAP after the toolbar HTML is available. You can combine this with either #1 or #2 above.
Determine the proper toolbar server-side so that the HTML that arrives at the browser is already properly pre-formed. Since the server already knows whether the user is logged in or not, this should be possible.
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 have searched through all of the questions related to this that I can find and I just can't seem to make the text change.
Here is the dropdown in question:
Marketsource
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="nav navbar-nav">
<!--First Dropdown - This needs to be fixed. Should change the text when clicked to the store that was selected.-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><span id="StoreType">Store Type</span></a>
<div id="dropdownStore" class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" id="100" onclick="setStoreType(100);" >Best Buy</a>
<a class="dropdown-item" id="101" onclick="setStoreType(101);" >Office Deopt</a>
<a class="dropdown-item" id="102" onclick="setStoreType(102);" >Office Max</a>
<a class="dropdown-item" id="103" onclick="setStoreType(103);" >Staples</a>
<a class="dropdown-item" id="104" onclick="setStoreType(104);" >Costco</a>
</div>
</li>
I included the part for the navbar because the way I have it setup currently doesn't seem to quite match any of the examples I have seen.
Javascript that I have right now (I've gone through quite a few variations on something similar):
//Dropdown toggle
$(".dropdown-menu a").click(function(){
$(this).closest('.dropdown-item').children('a').text($(this).text())
});
Can someone assist me with my issue? It's not super important but it's something that would give this webapp a little more responsiveness.
Thank you!
EDIT:
I realize it's been a little bit since I asked this, but I still haven't been able to get it to work. I put the two files that are needed into a Github Gist here:
JS: https://gist.github.com/ChristopherBare/bd29ba9bc4ffea9953c3039acc03f81d
HTML: https://gist.github.com/ChristopherBare/b2770b00881b978af3b666ba67c0e4b1
I don't know whats going on with it. If someone can just look over the files and tell me where I went wrong, that would help tremendously.
P.S. There are a couple functions in the JS that don't really do anything yet because they aren't done. So just ignore that for now.
The issue is here:
$(this).closest('.dropdown-item').children('a').text($(this).text());
and th html is like:
<div id="dropdownStore" class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" id="100" onclick="setStoreType(100);" >Best Buy</a>
here .dropdown-item is under .dropdown-menu and you are using closest() selector, which search for the DOM upwards. Instead of closest try find() and also remove .children('a') as .dropdown-item is itself an anchor.
Not sure if this is what you are looking for but you could do it simply without that extra setStoreType function.(though I am not sure what you are trying to do with that function so i skipped it.)
If you wanted to the id as the store type and not the text inside the link I can add that later.
//Dropdown toggle
/*
$(".dropdown-menu a").click(function(){
$(this).closest('.dropdown-item').children('a').text($(this).text())
});
*/
function setStoreType(){
}
//Dropdown toggle
$(".dropdown-item").on("click", function(){
$("#StoreType").text($(this).text());
});
.dropdown-item:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="nav navbar-nav">
<!--First Dropdown - This needs to be fixed. Should change the text when clicked to the store that was selected.-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><span id="StoreType">Store Type</span></a>
<div id="dropdownStore" class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" id="100">Best Buy</a>
<a class="dropdown-item" id="101">Office Deopt</a>
<a class="dropdown-item" id="102">Office Max</a>
<a class="dropdown-item" id="103">Staples</a>
<a class="dropdown-item" id="104">Costco</a>
</div>
</li>
I still haven't found an answer to this issue. I have posted some github gists so that all of the code is there. It is something to do with jQuery not working properly, or possibly the way that I have my dropdown formatted?