I have a button which is using angular-ui-bootstrap dropdown and a vanilla text input. Once the page loads, I can freely enter text into the input box. However, after clicking the button, I can no longer focus on the input box: focus continually jumps back to the dropdown button.
How do I fix this problem, or have I hit a bug (and I should raise an issue)?
Here is a simple example using code directly from angular-ui-bootstrap:
https://plnkr.co/edit/JbXo3WfLgrHoXcyC2If4?p=preview
<div ng-controller="DropdownCtrl">
<!-- Single button -->
<div class="btn-group" uib-dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
<input type="text">
</div>
FWIW, this seems to be the offending function call: https://github.com/angular-ui/bootstrap/blob/7a1d54c8c34265e0e1b7ac1b38f58b5867a2af49/src/dropdown/dropdown.js#L108
Looks like you found an already found bug. Someone raised an issue for the ui-dropdown focus already...please check this link: https://github.com/angular-ui/bootstrap/issues/6372 and also this one which describes your issue: https://github.com/angular-ui/bootstrap/issues/6364
Related
New to Bootstrap, CSS and HTML. My question is about side-navigation menu item behavior, particularly for collapsible menu items. I'd like the user to know that some items have sub-items, by showing the menu toggle item next to them. I have tried to use the data-bs-toggle class in Bootstrap to build collapsible menu item in the side nav bar. That works and correctly expands downwards/collapses upwards, except it doesn't have the toggle up/down arrow next to it. So the user doesn't know it is a dropdown menu. If I change my class on the list menu item to dropdown-menu then the sub-menu items overlay on top of the other menu items below, rather than sliding them down and expanding downwards.
Here is my code:
<li>
<a href="#submenu1" data-bs-toggle="collapse" class="nav-link px-0 align-middle">
<i class="fs-4 bi-speedometer2"></i> <span class="ms-1 d-none d-sm-inline sidenavlink">Concepts</span></a>
<ul class="collapse show nav flex-column ms-1" id="submenu1" data-bs-parent="#menu">
<li class="w-100">
<span class="d-none d-sm-inline sidenavlink">Item 1</span>
</li>
<li>
<span class="d-none d-sm-inline sidenavlink">Item 2</span>
</li>
</ul>
</li>
Here is the alternate code that I tried but it doesn't expand like the menu above...
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Resources
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">How To Guide</a></li>
<li><a class="dropdown-item" href="#">List Of All Words</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Contribute A Word</a></li>
</ul>
</li>
So all I'm missing is -- how do I retain my side navigation behavior exactly like it is, but add a toggle icon so the user knows to expand/collapse.
TIA for assistance.
I am using a bootstrap one page template. I have everything all squared away except that I have a menu button (when clicked exposes sidebar menu) and it works only one time. To make it work again I have to reload page. It's kind of weird because it seemed to be working fine at first, but now it doesn't. The only thing I can think of is something in the routes.rb? I will post my _navbar partial to see if I am missing something there.
Does anybody know how to make the navbar stay loaded? It's a one page site so it is basically just linking to partial on page.
Thank you for any help, I will continue to research this, but so far no luck. Btw I am using stylish portfolio theme.
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand">
<a href="#top" onclick = $("#menu-close").click(); >PCC</a>
</li>
<li>
<a href="#top" onclick = $("#menu-close").click(); >Home</a>
</li>
<li>
<a href="#about" onclick = $("#menu-close").click(); >About</a>
</li>
<li>
<a href="#services" onclick = $("#menu-close").click(); >Vision</a>
</li>
<li>
<a href="#portfolio" onclick = $("#menu-close").click(); >History</a>
</li>
<li>
<a href="#contact" onclick = $("#menu-close").click(); >Contact</a>
</li>
</ul>
</nav>
I am trying to align my drop down menu along the right side. Please see the attached picture and reference HTML code. Only a float right has been applied via CSS to move the drop down to the right side of the screen.
<li class="dropdown" id="it"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">IT Tools
<span class="caret"></span></a>
<ul class="dropdown-menu" id="drop">
<li>Printer Info</li>
<li>Ricoh Support</li>
<li>Paper Cut</li>
<li>Nagios</li>
</ul>
</li>
I simply added dropdown-menu-right in this bit:
<ul class="dropdown-menu dropdown-menu-right">
It worked for me!
I am having a bit of a problem with my site, i am trying to add a simple link to an external site, but i can't get the link to open without right clicking and selecting open link.
This is the piece of code
<div class="brick1 odd">
<a href="https://www.google.co.uk/" class="nav-item"</a>
<div class="nav-hover"></div>
<i class="li_shop"></i>
<span>Shop now</span>
</a>
</div>
I know it's most likely something simple but i can't seem to pin it down
Thanks
Aha! The problem is because you are trying to link from an http to an https!
Your anchor tag needs to override the click handler:
<a href="https://www.google.co.uk/" class="nav-item" onclick="return !window.open(this.href,'WINDOW_NAME');" >
Should fix it!
But I would still fix the nesting.
try properly nesting everything, like so:
<div class="brick1 odd">
<a href="https://www.google.co.uk/" class="nav-item" onclick="return !window.open(this.href,'WINDOW_NAME');">
<div class="nav-hover">
<i class="li_shop">
<span>Shop now</span>
</i>
</div>
</a>
</div>
Syntax error
<a href="https://www.google.co.uk/" class="nav-item">
<div class="nav-hover"></div>
<i class="li_shop"></i>
<span>Shop now</span>
</a>
I want to change the inner text value of a div that is located on my site.master page, and I want the changed value to remain for the rest of the session.
The value I want to pull through is the User name that is obtained from OAuth
By Using: User.Identity.Name;
I can only access this property once a user has authenticated, based on my redirect after authentication the page then moves to a nested master page for the members_only section.
I can change the text of the div with this code:
((HtmlGenericControl)Master.Master.FindControl("LoginButton")).InnerText = User.Identity.Name;
But as soon as I redirect, the text changes back to null.
I use it for my bootstrap user button which looks like this
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> <div id="LoginButton" runat="server"></div></a><a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a><ul class="dropdown-menu">
<li><i class="icon-pencil"></i> Manage</li>
<li class="divider"></li>
<li><i class="i"></i>Logout</li>
</ul>
</div>
Any advice would be greatly appreciated.
You could just use the LoginName control to do all that for you - just drop it into your MasterPage.