Develop Reference

Using Span for Triggering Bootstrap Dropdown

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/

Configuring angular material with rails

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!

bootstrap: style="display:none" get's automatically appended in the 'li'

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).

Bootstrap dropdown - can't get it to work

I am trying to get the Bootstrap component Dropdown to work.
<div class="dropdown">
<a data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Item</li>
</ul>
</div>
What am I doing wrong?
http://jsfiddle.net/xDUR9/

Add jquery to your code.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Demo

Use this code and don't forget to include jQuery and bootstrap.min.js in your document.
<div class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div>
You can check out this link for live demo - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-dropdowns.php

How can I change hover to mouseclick? (bootstrap, collapse)

Right now menu uses hover to toggle elements. How can I change hover to mauseclick?
<div id="nav-collapse" class="collapse out">
<ul class="nav">
<li class="logo" style="font-size: 25px;">WEBSITE-NAME</li>
<li>
<span data-toggle="collapse" data-target="#portfolio-collapse"></span>LINK #1
<ul id="portfolio-collapse" class="collapse out">
<li>SUB LINK #1</li>
<li>SUB LINK #2</li>
<li>SYB LINK #3</li>
</ul>
</li>
...
bootstrap.min.js code on my website (http://wklej.to/OrUbj/text).

Your question and issue is not clear. Please edit your question and include more details such as screenshot, fiddle links etc. However, according to Bootstrap Docs, the Navbar dropdown menu works for click event and the markups is as below:
<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="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
If you are trying to get responsive menu, then your code would be similar to below:
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>