I have following piece of code in my jsp.
<li id="report" class="dropdown open"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Report <b class="caret"></b></a>
<ul class="dropdown-menu">
<li >Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li style="">Separated link</li>
<li>One more separated link</li>
</ul>
</li>
but when it's getting rendered in the browser, automatically the code becomes as following:
<li id="report" class="dropdown open"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Report <b class="caret"></b></a>
<ul class="dropdown-menu">
<li style="display: none;">Action</li>
<li style="display: none;">Another action</li>
<li style="display: none;">Something else here</li>
<li class="divider" style="display: none;"></li>
<li class="nav-header" style="display: none;">Nav header</li>
<li style="display: none;">Separated link</li>
<li style="display: none;">One more separated link</li>
</ul>
</li>
I am unable to understand from where all the li's are getting this style="display:none" property, is it some bootstrap javascript which is doing it. I am debugging the code on chrome.
I was not able to track, which js was doing the changes to my lists, so what I did is, I put every li in a class called 'visible' and in my tag I put a style as follows:
<style>
.visible{
display:inline !important;
}
</style>
This problem happens in Magento (version 1.9 for me) and it's caused by an incompatibility between Protype JS library and jQuery. There is a fix here.
It's perfectly normal: the style is added in order to hide the dropdown menu when related button isn't clicked.
That control is performed by JavaScript (check bootstrap.js).
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 am trying to build my first api in Rails. And for that I want to use angular for front-end and ruby for back-end . I managed to get angular working but for some reason I can't get angular-material to work. I tried using this gem and followed the instructions written there.
The problem I am facing with it that frankly it doesn't work, nor do I get a meaningful error from the web console.
The project I am trying to make can be found here . I know it needs a lot of code refactoring and so on, I am just trying to configure things at the moment.
On the web page this is the only thing that get displayed :
Primary (md-noink)
Disabled
from this command:
<section layout="row" layout-sm="column" layout-align="center center">
<md-button>{{title1}}</md-button>
<md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
<md-button ng-disabled="true" class="md-primary">Disabled</md-button>
<md-button class="md-warn">{{title4}}</md-button>
<div class="label">Flat</div>
</section>
which makes me believe it doesn't work...
also this is a navbar that has to be green but is not:
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Active</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 class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
<ul class="nav navbar-nav navbar-right">
<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 class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
when you make your backend with the rails-api, a view is not created, so you don't have to worry about which angular gem to pick from. You can create another directory (and repository) for the client (your angular frontend) and generate the frontend there. Now all you have to worry about is getting data, whether JSON or XML, traveling between the API and your client.
You can find a step by step tutorial here.
Hope it works out!
I was trying to update my version of bootstrap from 3.1.0 to the currently latests 3.3.0.
But I noticed after upgrading that my dropdown menu's aren't working anymore.
For some reason the javascript doesn't pickup the elements with the .dropdown-toggle css class.
But when I dive into the chrome javascript console and execute the following command:
$('.dropdown-toggle').dropdown()
I notice the dropdown menu's do work. I compared the html of the menu's before and after this command and it remained the same.
I also looked in the release notes from bootstrap and could find any breaking changes regarding dropdown menus. This is a example piece of my code:
<ul>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#">Customers</a>
</li>
</ul>
<ul aria-labelledby="dLabel" class="dropdown-menu" role="menu">
<li>
Overview
</li>
<li>
Customer form
</li>
</ul>
Does anybody got a tip?
Worked just fine, only thing you must do is to use Jquery latest
Here is working fiddle
http://jsfiddle.net/2qWy8/22/
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span></a>
<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>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
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 this code, I want to make this menu collapse for mobile-devices
<nav class="navigation">
<ul class="nav nav-pills nav-stacked" id="nav-menu">
<li class="active" >Domov</li>
<li>Koncerty</li>
<li>Shop</li>
<li>Download</li>
<li>Kontakty</li>
<li>Troll</li>
</ul>
</nav>
And I want to do this:
I've found a similar question, which seems to have a detailed answer that will be useful for you. It didn't work perfectly for me, but it does seem much closer than I was before.
Check it out: makes nav-pills collapsable just like nav-bar in bootstrap
Try the following code. This should help you. I assume what you need from the reference link you provided. Though that site I guess is not using bootstrap.
<nav class="navbar navbar-default" role="navigation">
<div class="">
<ul class="nav navbar-nav">
<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>
</div><!-- /.navbar-collapse -->
</nav>
You should get more help from docs
http://getbootstrap.com/components/#navbar