I'm moving from Bootstrap 2.3 to Bootstrap 3.0 and want to remove the double tap functionality from the li elements in a dropdown in a navbar.
So for example:
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
In the above I don't want to have to double tap to select the Action line link.
I have tried restructuring my anchors, but it appears to be tied to the class name. I suspect I will have to modify the bootstrap js file, and this isn't an issue. Just can't figure out which I have to edit.
Does anyone know if this will be possible?
This was my mistake. There is no double tap style functionality with Bootstrap. Instead what was happening was that since I was hiding child elements (display: none) the dropdown still thought they existed. Normally you would tab once to display the dropdown, and then tap again to access the parent. By completely removing the hidden child elements the dropdown functioned with a single tap.
Related
I have several icons in the header that is used from a font and wrapped with
<li style="margin-top: 15px">
<span class="myIcons" id="messages" style="font-size: 5px">m</span>
</li>
I want to use it to trigger bootstrap dropdown however in its documentation, it uses button and div and, I couldn't figure out how to trigger it when clicked on the font.
Should I try using jquery and try to trigger the dropdown to open on click on #messages?
You do not have to use <button>'s and <div>'s - the important thing is to have a data-toggle="dropdown" on the triggering element :
<ul class="dropdown">
<!-- your markup -->
<li style="margin-top: 15px" data-toggle="dropdown">
<span class="myIcons" id="messages" style="font-size:5px">m</span>
</li>
<!--// your markup -->
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</ul>
demo -> http://jsfiddle.net/7ujpzs58/
I have written the following code for a basic Angular dropdown which takes data from a controller. This creates a very basic dropdown and doesn't utilize Bootstrap styling. I am trying to combine Bootstrap and Angular, but I'm unable to figure out how will I combine the following:
Current code:
<ul class="nav nav-sidebar">
<li>
<p>
<select data-ng-model="s1" data-ng-options="x.col1 for x in data1" data-ng-change="updateData2()">
<option value="" disabled selected>Drop Down 1</option>
</select>
</p>
</li>
<li>
<p>
<select data-ng-model="s2" data-ng-options="x.col1 for x in data2" data-ng-change="updateData3()">
<option value="" disabled selected>Drop Down 1</option>
</select>
</p>
</li>
</ul>
What's necessary for Bootstrap:
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
The problem I'm facing is how to use ng-repeat or another directive, rather than adding <li> for every item under ul.
This is the thousand foot view of how I implemented this.
Create a JSON object that holds your list items values, attributes and such. You will also need a type property, item, header row, etc.. You will then run the created object through the ng-repeat. While doing the repeat set up a ngSwitch and watch type. Inside of the switch cases you will have a block of HTML that relates to the type it matches. This will let you create several different types of elements inside of the same repeat.
<ul ng-repeat='item in items'
ng-switch-on='item.type'>
<li ng-switch-when="type1" your desired attributes >
Inner HTML
</li>
<li ng-switch-when="type2" your desired attributes >
Inner HTML
</li>
<li ng-switch-when="type3" your desired attributes >
Inner HTML
</li>
</ul>
I'm dealing with a problem with Bootstrap navbar, where I have multiple dropdowns but I need the actual dropdown-toggles to be links aswell, it works on desktop, but there is a problem with that on mobile, where there is no hover which Im using to show the dropdown.
For example this basic menu:
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
I am controlling the hover dropdown with JQuery.
I want to have the dropdowns shown on mobile automatically, so you can click all of the links.
I used the solution described here on stackoverflow
Problem with that one is that if you have another link or dropdown under the first one, the second one overlays the dropdown menu above it so you can't click it.
Look at this jsFiddle
When the navbar is collapsed, open it and try to hover over the dropdown menu, you can see that the link underneath is highlighted instead.
For some reasone the bottom link element gets expanded, and I can't get rid of it.
Any help would be much appreciated.
I am using bootstrap on a website, and would like to customize its dropdown menu. Currently, it looks like the default navbar. The dropdown elements of the navbar get shown upon hover. What I would like to do is to add an icon next to each item in my navbar. I would then like the dropdown items to become visible upon hovering over the icon, not the text. How can that be achieved?
You can try the ".disabled" class built into the Bootstrap theme. Referenced here: http://getbootstrap.com/components/#nav
<li class="disabled">Disabled link</li>
<li class="dropdown">
<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
I have a multilevel dropdown made with bootstrap, now when I navigate few levels deep and accidentally pointer comes out of current dropdown list, all lists are closed until 1st level. How can I keep all opened dropdowns open and close only when it is clicked outside dropdown? i.e. do the same when mouse is clicked on outer space, not when just moved there.
Here is my demo: http://jsfiddle.net/n8XJb/
<ul class="nav nav-pills">
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu" id="menu1">
<li class="dropdown-submenu">
Level 1
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Level 2
<ul class="dropdown-menu">
<li>Level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
When you navigate to Level 3, and then mouse pointer comes out of current list, it goes back to Level 1 instantly.
I have solved it by some custom event handling (http://jsfiddle.net/n8XJb/2/):
jQuery('.dropdown-menu li a').mouseover(function(e) {
e.stopPropagation();
jQuery(this).parent().parent().find('li').each(function() {
jQuery(this).removeClass('open');
});
jQuery(this).parent().addClass('open');
});
jQuery('.dropdown-toggle').click(function(e) {
jQuery(this).parent().find('li').each(function() {
jQuery(this).removeClass('open');
});
});
Bootstrap uses class open for open dropdowns, so we can set/unset it manually whenever needed.