How to fix bootstrap dropdown menus that don't function - html

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?

Related

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

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

Using <a> tag or <button> tag for dropdown menues | bootstrap

We're using bootstrap in our project, and when we use dropdown we are asked to change our menu items from <a href="#" .. to <button> instead. Even tho the documentation for bootstraps use <a href ..
https://getbootstrap.com/docs/4.0/components/dropdowns/
I've asked the UX designer, and it has some issues with focus tabbing, like. when you tab through elements.
Is there any other compelling reason to use <button> over <a href="# ..
You can easily use buttons in a dropdown, too:
<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">
<button class="dropdown-item">Action</button>
<button class="dropdown-item">Another action</button>
<button class="dropdown-item">Something else here</button>
</div>
</div>
Working example: https://www.bootply.com/NTH6FzGx4A

DropLeft 's position is wrong

I designed a navbar with bootstrap4.in the right side of navbar I have my links.
when I place a drop left on the navbar, the drop left opens in the wrong place.
What is the problem?
my HTML:
<li class="nav-item dropleft">
<button class="btn bg-white nav-link text-dark dropdown-toggle" id="dd" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >MORE</button>
<div class="dropdown-menu" aria-labelledby="dd">
sadasd
</div>
</li>
This is What happens:
https://i.stack.imgur.com/Yakc3.png
This is a known issue in Bootstrap 4.0.0: https://github.com/twbs/bootstrap/issues/25304
As you can see in the comments, it's unknown if dropleft/right will be supported inside the navbar because of the way the popper.js positioning works.
This affects dropup, dropleft and dropright.

Bootstrap button drop-down not under button

So I have what should be an easy task that I just can't seem to find the answer to. The issue, of course, is somewhere in the CSS adjustment.
I have a bootstrap button group when includes a button dropdown. The group is pulled right inside a panel.
Here is a link to the Fiddle
my button group looks like:
<div class="btn-toolbar pull-right" role="toolbar" aria-label="Toolbar with button groups">
<div class="dropdown">
<div class="btn-group-sm" role="group" aria-label="First group">
Favorite
<button href="#" class="btn btn-secondary dsbtnsec dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Graph Race <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Bar Chart</li>
<li>Pie Chart</li>
</ul>
County View
Explore Map
Export Race <span class="glyphicon glyphicon-export"></span>
</div>
</div>
</div>
The Graph Race drop-down works but isn't positioned under the button properly. I can't seem to figure out where the CSS issue is occurring. Can anyone point me in the right direction?
The issue happens with the default Bootstrap CSS so it's not something that I think I introduced.
I think your problem is the btn-toolbar class : <div class="btn-toolbar pull-right" role="toolbar" aria-label="Toolbar with button groups">
try this :
<div class="pull-right" role="toolbar" aria-label="Toolbar with button groups">
It's work for me : https://jsfiddle.net/4tgyu9u0/

Dropdown menu dynamically "generated" from Umbraco backend possible?

I am trying to populate my header with links. I have two dropdowns at the moment. I would like to populate the links using Umbraco and Razor, so nothing is hardcoded. This can be done quite easily (see code below), but populating the dropdowns is the tricky part.
I'm not sure how I would populate the dropdown in a good way. They are not subpages or anything like that, but they are simply dropdowns to make the header less wide. Here's how I populate my header using Razor by grabbing the links in Umbraco:
var home = CurrentPage.Site();
#foreach (var item in home.Children.Where("Visible"))
{
<li class="#(item.IsAncestorOrSelf(CurrentPage) ? "active" : null)">
#Umbraco.GetDictionaryValue(item.Name)
</li>
}
home.Children.Where("Visible") is simply grabbing all the child pages, where I have not checked the umbracoNaviHide.
This is currently how my header is created NOT using Umbraco (which I need to populate using the pages from Umbraco):
<nav class="navbar navbar-toggleable-lg navbar-light fixed-top">
<div class="d-flex align-items-center justify-content-between">
<button class="navbar-toggler navbar-toggler-left" 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>
<a class="navbar-brand ml-3" href="/en">
<img src="logo.png" class="logo" alt="logo">
</a>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto justify-content-between full-width">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">History</a>
</div>
</li>
<li>
Our Products
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resources
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
<a class="dropdown-item" href="#">Tips</a>
<a class="dropdown-item" href="#">News</a>
</div>
</li>
<li>
Contact Us
</li>
</ul>
</div>
</nav>
This will produce a result like this: https://codepen.io/anon/pen/QvyeRm
I don't want any of the links to be affected by this, as the links or pages doesn't really have anything to do with the header's layout. Here are some example URLs:
/en/about-us/
/en/history/
/en/our-products/
/en/tips/
I hope that makes sense.
Is there a good and easy way to do this?
There are a few ways that you could do this. the way I typically do main navigation on a site is to have a multiple content picker or similar to alow me to choose the items I want to show up in the navigation.
In your example, your sub-menu items aren't actually underneath the parent menu item. You could create a picker for each of the dropdowns, say on your home node, and choose the pages for each one?
If you plan to make the navigation more flexible though, you might need to do something a bit fancier, you could look at something like the Nested Content package to help you do this?
So I found a pretty good way of doing this. All I need to create is a content with document type set to Dropdown, then set the title (basically the label) and then add permissions for the children of the dropdown.
#foreach (var item in selection)
{
if (item.GetPropertyValue<bool>("showDropdown"))
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#item.GetVortoValue("Title")
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
#foreach (var child in item.Children)
{
<a class="dropdown-item" href="#child.Url">#child.GetVortoValue("Title")</a>
}
</div>
</li>
}
else
{
<li>
#item.GetVortoValue("Title")
</li>
}
}
I started by creating a document type called "Dropdown". The sole purpose of this document type, is to be a parent for the pages inside the dropdown. Then I set the permissions to allow the two pages I have to be inside the dropdown, and I set the permissions on my Master to allow the dropdown document type.
Then I created a new property on the master document type, which is called "Show dropdown". If this is ticked, it will show the dropdown on the page. I had to do this, because pages with children (if(item.Children.Any())) would be true no matter what.