I Have markup that displays a Bootstrap-4 menu, with say 4 items.
Each menu Item, has a nested-submenu. (and i plan on going deeper)
The First item's submenu displays correctly. (Logistics, Logistics, Logistics)
The Following items does not display its respective submenu, but repeats the first item's submenu. (Logistics, Logistics, Logistics)
Suggestions for any would be appreciated....
I checked my markup, so lines are aligned and all nested correctly.
I found examples of bootstrap menus with only 1 submenu and that worked (obviously).
Having more than 1 submenu creates this problem.
<Done>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Home
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-toggle dropdown-item" href="#" id="navbarDropdownMenuLink11" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Applications
</a>
<ul class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink11">
<div class="dropdown-menu">
<a class="dropdown-item" href="">Logistics</a>
<a class="dropdown-item" href="">Logistics</a>
<a class="dropdown-item" href="">Logistics</a>
</div>
</ul>
<a class="dropdown-toggle dropdown-item" href="#" id="navbarDropdownMenuLink12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Technical Support
</a>
<ul class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink12">
<div class="dropdown-menu">
<a class="dropdown-item" href="/screens/utility.htm">Downloads</a>
<a class="dropdown-item" href="/screens/down_install.htm">Installation</a>
</div>
</ul>
<a class="dropdown-toggle dropdown-item" href="#" id="navbarDropdownMenuLink13" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
External Links
</a>
<ul class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink13">
<div class="dropdown-menu">
<a class="dropdown-toggle dropdown-item" href="#" id="navbarDropdownMenuLink14" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Logik Center
</a>
<ul class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink14">
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:window.open('http://logik.pwv.gov.za')">Log Request</a>
<a class="dropdown-item" href="javascript:window.open('http://10.131.15.145/vulindlela/requests_login.htm')">View Request</a>
</div>
</ul>
<a class="dropdown-item" href="javascript:window.open('http://xxxxxx')">Persal</a>
<a class="dropdown-item" href="javascript:window.open('http://xxxxxx')">Logis</a>
<a class="dropdown-item" href="javascript:window.open('http://xxxxxxxx/')">BAS</a>
<a class="dropdown-item" href="javascript:window.open('http://xxxxxxx')">Government</a>
<a class="dropdown-item" href="javascript:window.open('http://xxxxxxx')">National </a>
<a class="dropdown-item" href="javascript:window.open('http://www.xxxxxxxx/')">Bank</a>
</div>
</ul>
<a class="dropdown-item" href="/screens/vulhistory.htm">History</a>
<a class="dropdown-item" href="/screens/contactus.htm">Contacts</a>
<a class="dropdown-item" href="/screens/main.htm">Home</a>
</ul>
</li>
</Done>
I expect every item's submenu to be displayed, not just a repeat of the first items submenu.
Let me know if I need to provide more info.
It might be down to the way you're nesting the menu. Check below for a working example with 2 drop downs.
Here is the code:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action2</a>
<a class="dropdown-item" href="#">Another action2</a>
<a class="dropdown-item" href="#">Something else here2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link2</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Related
I have this code in bootstrap 5 and it works as expected.
when clicking the tag the appropriate divs collapsed/hiden.
However i want to prevent the closing of other divs when you open the other one, how to prevent this in bootstrap 5?
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" role="button" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> 1<li>
<li class="nav-item"> 2<li>
<li class="nav-item"> 3<li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" role="button" href="#ui-enquiries" aria-expanded="false" aria-controls="ui-enquiries">
<i class="icon-grid-2 menu-icon"></i>
<span class="menu-title">Inquiries</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-enquiries">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> 1<li>
<li class="nav-item"> 2<li>
<li class="nav-item"> 3<li>
</ul>
</div>
</li>
Using Bootstrap 5, with the navbar being a re-usable component used on many screens. The drop down menus work on all screens except for one, but for the life of me I can't see why that screen is different. JS console shows no errors, the navbar markup is identical to the one used in the other screens.
Any ideas on this are welcome.
Here's the navbar code (some data redacted for client's privacy):
<div class="bg-light">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">client's name</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-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 me-auto">
<li class="nav-item">
<a class="nav-link " href="/bkofc/">Main</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/bkofc/cases/" aria-current="page">Screen 1<span class="sr-only">
(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownConfiguration" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
ניהול
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownConfiguration">
<a class="dropdown-item" href="/bkofc/branches/">config 1</a>
<a class="dropdown-item" href="/bkofc/caseTypes/">config 2</a>
<a class="dropdown-item" href="/bkofc/clients/">config 2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/bkofc/users/">config 3</a>
<a class="dropdown-item" href="/bkofc/inviteUser/">config 4</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarUserDropdown" role="button"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#admin
</a>
<div class="dropdown-menu" aria-labelledby="navbarUserDropdown">
<a class="dropdown-item" href="/bkofc/users/admin/edit">my account</a>
<div class="dropdown-divider"></div>
<form class="dropdown-item" action="/bkofc/logout" method="POST">
<input type="hidden" name="csrfToken" value="..." />
<button type="submit" class="btn btn-outline-danger"> logout</button>
</form>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
I ran the create using the jsbundler and cssbundler, it installed the appropiate files.
$ rails new app -j esbuild --css bootstrap
I created a navbar from the bootstrap doc on a partial and rendered on the application.html.erb
but when I run
$ ./bin/dev
on the navbar when I click on the dropdown or the hamburger button nothing happens
<!--./app/views/shared/_navbar.html.erb-->
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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-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>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Also, I tryed importmap bootstrap but nothing seems to work.
You need to import bootstrap js files in your application.js, like that:
import "#hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"
document.addEventListener("turbo:load", () => {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
})
Reference: https://github.com/gorails-screencasts/bootstrap-css-bundling
Have you checked if the required bootstrap bundle js file is properly loaded?
Instead of using the asset pipeline why don't you add the required CSS and JS CDN links of bootstrap under the head tags in the application.html.erb file. I used this in my internship project and it works really well.
I am trying to figure out the best way to use authentication to control which ul tag is displayed
Curent html
//wrap all this is authentication razor code?
<!-- START Profile button menu -logged in -->
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">Profile</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Manage" asp-action="Index">
<i class="si si-envelope-open pull-right"></i>
<span class="badge badge-primary pull-right">3</span>Inbox
</a>
</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Manage" asp-action="Index">
<i class="si si-user pull-right"></i>
<span class="badge badge-success pull-right">1</span>Profile
</a>
</li>
<li>
<a tabindex="-1" href="javascript:void(0)">
<i class="si si-settings pull-right"></i>Settings
</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Actions</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Account" asp-action="Lockout">
<i class="si si-lock pull-right"></i>Lock Account
</a>
</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Account" asp-action="Logout">
<i class="si si-logout pull-right"></i>Log out
</a>
</li>
</ul>
<!-- END Profile button menu -logged in-->
<!-- START Profile button menu - not logged in-->
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">Actions</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Account" asp-action="Login">
<i class="si si-logout pull-right"></i>Login
</a>
</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Register" asp-action="Register">
<i class="si si-lock pull-right"></i>Register
</a>
</li>
</ul>
<!-- END Profile button menu - not logged in -->
I found a blog post by Dave Paquette on custom tag helpers to accomplish this, but I couldn't get it to work. This html is in my partial view of my header navigation so I can't (or don't know how to check for this in the controller) so I opted to test for logged in user using Razor.
I don't see any blogs or tuorials on simple logged in user check. They all have to do with policy's, claims, etc. I just simply want to know if the user is logged in or not and display the ul dependent on that.
I think you need to use SignInManager to see if there is any user logged in. This will use Claims. If you are using the AplicationUser model you can do the following.
On your razor page use:
inject SignInManager<ApplicationUser> SignInManager
And then:
#if (SignInManager.IsSignedIn(User))
{
//some html...
}
Here's my html:
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-user"></i> Register / Login <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<i class="fa fa-fw fa-circle-o"></i> login
</li>
<li>
<i class="fa fa-fw fa-circle-o-notch"></i> Register
</li>
<li class="divider"></li>
</ul>
</li>
Here's my expectation:
it { should have_link 'Register', href: registration_path }
However, the spec fails, even though the register link clearly exists. If I move the link out of the<ul> like this:
<i class="fa fa-fw fa-circle-o-notch"></i> Register
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-user"></i> Register / Login <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<i class="fa fa-fw fa-circle-o"></i> login
</li>
<li>
</li>
<li class="divider"></li>
</ul>
</li>
The spec passes. Why is this?
I guess you're using capybara.
Capybara will not detect hidden elements.
You need to click on a '.dropdown-toggle' element and then check the 'Register' link.
And this will only work when javascript driver is used (selenium, poltergeist, etc)
It's the good way - you're simulating a real user behavior.
However, you can try to change capybara's behavior
it "should have Register link", js: true do
find('.dropdown-toggle').click
expect(page).to have_link('Register', href: registration_path)
end