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!
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 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
The following item list code is inside of a navbar with navbar-fixed-top. The code below is output that was originally written as haml code.
Why does the "Manage Teams" item close the dropdown menu, but "Add sale ..." does not?
<li class="dropdown open" id="settings-drop">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
<span class="glyphicon glyphicon-plus"></span>
</a>
<ul aria-labelledby="settings-drop" class="dropdown-menu" role="menu">
<li role="presentation">
<a data-remote="true" href="http://localhost:3000/sales/new?referer=notifications" role="menuitem">Add sale ...</a>
</li>
<li role="presentation">
Manage Teams
</li>
</ul>
</li>
It seems like the data-remote="true" hash is somehow interfering with bootstraps ability to detect the item being clicked on and close it.
I am trying to create rounded style checkbox using Jquery mobile. In the below link, under multiple selects, choose option select menu i saw this type of checkbox. Is it possible to create that type of checkbox in listview of JQM?
http://jquerymobile.com/test/docs/forms/selects/custom.html#&ui-state=dialog
Thanks...
<ul data-role="listview" id="options">
<li data-icon="checkbox-off"><a>test</a></li>
<li data-icon="checkbox-on"><a>test</a></li>
</ul>
This code snippet makes round edges for listview, you can have any element inside it:
<ol data-role="listview">
<li class="ui-corner-bottom ui-corner-top" data-theme="a" >List Item 1</li>
<li class="ui-corner-bottom ui-corner-top" data-theme="a">List Item 2</li>
<li class="ui-corner-bottom ui-corner-top" data-theme="a">List Item 3</li>
</ol>
See the Demo here
http://jsfiddle.net/qXr79/5/