We Keep Coding

Add a dropdown toggle only if a condition is fullfiled

There is a list of elements created by this:
<td>
<span >{{rows.values}} <i class="fas fa-caret-down"></i></span>
</td>
I want that if rows.values has a value greater than 0 to have a dropdown toggle.
My try so far looks like:
<td>
<span >{{rows.values}} <i class="fas fa-caret-down dropdown-toggle" data-toggle="dropdown" dropdown-toggle></i></span>
</td>
<ul ng-class="rows.values ? dropdown-toggle: ''" role="menu">
<li>Action</li>
<li>Another action</li>
</ul>
but it doesn't do anything.
LATER EDIT:
After the suggestions received my code looks like:
<td>
<span >{{rows.values}} <i class="fas fa-caret-down dropdown-toggle" data-toggle="dropdown" dropdown-toggle></i></span>
</td>
<ul ng-class="{'dropdown-toggle': rows.values}" role="toggle">
<li>Action</li>
<li>Another action</li>
</ul>
but still does not do anything.
Any suggestions?

You forgot to add single quotes for values:
<ul ng-class="rows.values ? 'dropdown-menu' : ''" role="menu">
<!--------------------------^-------------^
Or the other way to do is:
<ul ng-class="{'dropdown-menu': rows.values}" role="menu">

try this.. Use as an expression
<td>
<span >{{rows.values}} <i class="fas fa-caret-down dropdown-toggle" data-toggle="dropdown"></i></span>
</td>
<ul class="dropdown-menu {{rows.values>0?'':'ele-show'}}">
<li>Action</li>
<li>Another action</li>
</ul>
and give a custom style as
.ele-show{
display:none;
}

How to make bootstrap dropdown draggable?

Here is my bootstrap dropdown
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
I try to implement draggable on it via jQuery UI with code
$('.dropdown').draggable();
But I can only drag it only when the dropdown menus are shown and not when they are hided. Also i cannot drag on the button but only on the <ui> of the dropdown list.
Can some one explain me whats the problem and how to fix it?

This will work. You have to prevent the button click.
$(document).ready(function() {
$( ".dropdown" ).draggable({
cancel: false,
});
});

Bootstrap dropdown list button doesn't work

When click on bootstrap button a list should be opened, but it doesn't respond on the click.
<div class="btn-group" dropdown>
<button type="button" class="btn btn-info">test</button>
<button type="button" class="btn btn-info dropdown-toggle">
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<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>
</div>
code:
http://jsfiddle.net/Fanadka/r0sfvrcz/
Any idea?

Firstly, you have to include jQuery in your fiddle.
Secondly, you're missing the connection between the button and the dropdown, you'll should add an ID and some aria tags, like this
<div class="btn-group dropdown">
<button type="button" class="btn btn-info">test</button>
<button type="button" class="btn btn-info dropdown-toggle" id="mydp" data-toggle="dropdown" aria-haspopup="true" >
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="mydp">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
FIDDLE

Dropdown menu in table cell

I'm trying to apply twitter bootstrap dropdown to table cell of my table:
http://jsfiddle.net/NzvKC/500/
So this doesn't work. I did it according to this.
However it works like this:
<li class="dropdown span2" id="chamber">
<a href="#" class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
Name
<b class="caret"></b>
<br><br>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li class="liInner" role="presentation"><a role="menuitem" tabindex="-1" href="#">Value</a></li>
</ul>
</li>
What am I doing wrong?

The problem is the hover script. Get the code from the cameronspear page and your example will work.
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link
</li>
<li>Dropdown link
</li>
<li>Dropdown link
</li>
</ul>
</div>
<script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>

Multiple buttons in Twitter Bootstrap show the same dropdown - why?

I am trying to put together a little dropdown menu with Bootstrap. I put up a sample on JSFiddle here.
The idea would be to have each button trigger a different dropdown list, so that clicking on File gives you a dropdown containing New and Close, clicking on Edit gives you a dropdown containing Copy, Paste and Undo and so on.
However, I get the same dropdown for all buttons. I surely must have done something wrong.
I also had a look at this JSFiddle, linked to by this StackOverflow question, but it doesn't seem to work - no dropdown shows at all when clicking.
Any suggestion?
Here is a copy of the HTML:
<div id="mainMenubar" class="btn-group">
<button class="btn" href="#" onclick="alert('Hello!');">Menu</button>
<button href="#" class="btn dropdown-toggle" role="button" data-toggle="dropdown">File</button>
<ul id="fileMenuSelector" class="dropdown-menu">
<li>New</li>
<li>Close</li>
</ul>
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Edit</button>
<ul id="editMenuSelector" class="dropdown-menu">
<li>Copy</li>
<li>Paste</li>
<li>Undo</li>
</ul>
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Debug</button>
<ul id="debugMenuSelector" class="dropdown-menu">
<li>Some Debug</li>
<li>Show XML</li>
<li>Show Log</li>
<li>Shut down the lot</li>
</ul>
</div>

This should do what you want:
<div id="mainMenubar">
<button class="btn" href="#" onclick="alert('Hello!');">Menu</button>
<div class="btn-group">
<button href="#" class="btn dropdown-toggle" role="button" data-toggle="dropdown">File</button>
<ul id="fileMenuSelector" class="dropdown-menu">
<li>New</li>
<li>Close</li>
</ul>
</div>
<div class="btn-group">
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Edit</button>
<ul id="editMenuSelector" class="dropdown-menu">
<li>Copy</li>
<li>Paste</li>
<li>Undo</li>
</ul>
</div>
<div class="btn-group">
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Debug</button>
<ul id="debugMenuSelector" class="dropdown-menu">
<li>Some Debug</li>
<li>Show XML</li>
<li>Show Log</li>
<li>Shut down the lot</li>
</ul>
</div>
</div>
Edited to add styling for the navbar as discussed below:
.navbar {
display: table;
}
.navbar .nav > li > a {
padding: 5px;
}
.navbar-inner {
min-height: 0
}

I think you need to use links (anchors) inside the buttons to trigger the dropdowns instead...
<button class="btn btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
File
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>New</li>
<li>Close</li>
</ul>
</button>
Here's a working demo
EDIT: Here's an alternate version inside a .btn-toolbar so that each dropdown is inside its own btn-group. This works in FireFox: http://bootply.com/61019

I know this is like nearly 4 years old but i stumble across the same problem. ZimSystem have the correct answer but you mentioned that there is still some white spaces left when you copy and paste his code. Thats because his code isnt wrap inside a correct css style.
The fact that is nice when dropdown and buttons style doesn't look messy when put it in the same group, but anoying thing is the dropdown doesnt work properly.
Anyway here is a working code example without the use of modifying and bootstrap.css
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<div class="btn-group">
<button type="button" class="btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
</div>
dropdown-toggle class is put on the last button because it will put a border radius at the end making it look neat and finished.
I hope this will help someone else.