I use Bootstrap v2.2.2
And this is my button:
<div class="pagination ">
<ul>
<li>
<a href="" class="btn btn-success btn-large">
<i class="icon-fast-forward"></i>
</a>
</li>
</ul>
</div>
However, when I try to focus on button I get strange behavior of colors:
Demo in Fiddle
The fix is to remove pagination class or <ul> tag
How can I fix it?
Thank you,
(**comment: I'm not interesting to use bootstrap 3.0)
Changing the tag from anchor to button, it solves your display issue. I updated your fiddle
<button class="btn btn-success"> <i class="icon-fast-forward"></i> </button>
Related
<button ng-href="#!/edit/{{a.id}}"
type="button"
class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-edit"></span>
Edit
</button>
Nothing happens when I click on the button. But It goes to the link I want if I use
<a ng-href="#!/edit/{{a.id}}> Edit </a>
How can I use a button for this routing? Thanks
The issue is that <button> elements don't support the href attribute.
What you can try instead is to style your <a> element to look like a button using Bootstrap's classes.
<a ng-href="#!/edit/{{a.id}}"
class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-edit"></span>
Edit
</a>
I got a wrapper that stops event propagation because of other things happening in and with that wrapper. In that wrapper I got several directives with UI Bootstrap dropdowns.
The problem is, that these dropdowns doesn't close on any click. Only by clicking another dropdown.
It seems that UI Bootstrap Dropdown watches click on body or something to close all dropdowns.
<div class="wrapper" ng-click="$event.stopPropagation()" style="width: 100%; height: 300px; background:grey;">
<div class="btn-group" uib-dropdown>
<button id="split-button" type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" uib-dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="split-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>
https://plnkr.co/edit/bHHrpipM4MlxLNfOE2pt?p=preview
Any ideas to solve this?
Thanks for your help!
According to source code the event handler for closing of dropdown element is getting attached to window.document element:
$document.on('click', closeDropdown);
but at the same time $event.stopPropagation() method prevents click event from being executed.
If you want dropdown to trigger events in this scenario then you could bind click event to dropdown that basically triggers document element click event:
$scope.dropDownClick = function($event) {
angular.element(document).triggerHandler('click');
};
Dropdown element
<ul class="dropdown-menu" ng-click="dropDownClick($event)" uib-dropdown-menu role="menu" aria-labelledby="split-button">
...
</ul>
Forked plunker
A workaround you could use is shown at this working plnkr.
You need to stop wrapper's propagation and use a variable to toggle dropdown's is-open attribute.
I am trying to use ng-repeat in bootstrap dropdown menu, but it does not display the list of elements in drop down. am i missing anything in populating the elements of drop down list from a method defined in controller.
<button type="button" class="btn btn-default btn-sm" title="Results Per Page">
<span class="dropdown" dropdown>
<a href class="dropdown-toggle" dropdown-toggle>
<span class="caret"></span>
{{Temp.obj.pageSize}} Results Per Page </a>
<ul class="dropdown-menu">
<li data-ng-repeat="result in Temp.obj.availPages">
<a href data-ng-click="Temp.obj.setSize(result)">
{{result}}</a>
</li>
</ul>
</span>
</button>
You are simple missing the dropdown-menu directive in the ul list.
As a reminder, here is the (simplified) example from the angular-ui bootstrap doc.
<div class="btn-group" uib-dropdown>
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
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>
</ul>
</div>
It looks like you are using an old version of angular-ui bootstrap when the directive were not prefixed by uib-. I recommend updating your version if you can. Otherwise, just remove the prefixs from the example.
Edit: As you are using the version 1.1.2 of angular-ui bootstrap, you need to prefix the directives as shown in this answer. And here is the doc for reference
Right now my button is repeating because I am using ng-repeat to repeat the 2 versions buttons in my page, how can make just this button not repeat? that button needs to be together with the other ones, I know I can put this button out and will not repeat, but I need hide this button and make just appear when version buttons appear too.
everything is fine, just that button is repeating, is someway to use ng-repeat="none" or something similar?
Thanks.
html:
<div>
<div class="item"
ng-repeat="version in versions"
ng-class="{active: version.isActive}"
ng-class="{active: }">
<a ng-click="setDiffed(version)"
ng-class="{active: version.isDiffActive}"
name="compare-type"><i></i>
</a>
<h4 ng-click="setMaster(version)">{{ version.label }}</h4>
</div>
<button type="button" class="btn btn-primary">
back to home
</button>
</div>
You can put this button out and show it only if there are any versions.
Simplified HTML:
<div ng-repeat="version in versions">
<button>
{{version}}
</button>
</div>
<button ng-show="versions.length > 0">
back to home
</button>
See how it works: http://jsfiddle.net/qd4j6964/
Try using ng-show or ng-if, somthing like:
<div>
<div class="item"
ng-repeat="version in versions"
ng-class="{active: version.isActive}"
ng-class="{active: }">
<a ng-show = "Your condition for showing or not" ng-click="setDiffed(version)"
ng-class="{active: version.isDiffActive}"
name="compare-type"><i></i>
</a>
<h4 ng-click="setMaster(version)">{{ version.label }}</h4>
</div>
<button type="button" ng-show = "Your condition for showing or not" class="btn btn-primary">
back to home
</button>
</div>
AngularJS Documentation - ng-show .
I am pretty new to AngularJs. I have to toggle a section and used the ng-click like below:
<div class="panel panel-secondary scroll" href="#feedList-os" class="collapsedOs" ng-model="collapsedOs" ng-click="collapsedOs=!collapsedOs">
<ul id="feedList-app" class="list-group" ng-show="collapsedOs">
<li class="list-group-item clearfix">
<div class="panel panel-container scroll">
<button id="details" class="btn btn-danger" data-toggle="modal" data-target="#myModal">Details</button>
</div>
</li>
</ul>
</div>
This is working fine as expected, but I have a button inside the div with class panel panel-container scroll has a button. I do not want the toggle logic to be applied for clicking the button. Even if I override the ng-click on the button, that's not overriding the default functionality.
If you add ng-click on the inner button, you can pass in an event object $event.
<button id="details" class="btn btn-danger" data-toggle="modal" data-target="#myModal" ng-click='doWork($event)'>Details</button>
In the handler code you can do prevent bubble through for this event.
$scope.doWork($event) {
$event.stopPropagation
}