I want to split normal selectbox which should look like default ui bootstrap dropdown. I have used uibootstrap dropdown, but problem is selected dropdown value will not be displayed on top as like normal dropdown do.
Please let me know how do i split the select.?
You can use the current selected item as button label with the ui bootstrap split button like this:
<!-- Split button -->
<div class="btn-group dropdown" uib-dropdown="" style="">
<button id="split-button" type="button" class="btn btn-danger">{{selectedItem || 'Choose Item'}}</button>
<button type="button" class="btn btn-danger dropdown-toggle" uib-dropdown-toggle="" aria-haspopup="true" aria-expanded="true">
<span class="caret"></span>
</button>
<ul uib-dropdown-menu="" role="menu" aria-labelledby="split-button" class="dropdown-menu">
<li role="menuitem" ng-repeat="item in items" ng-click="selectItem(item)"><a href>{{item}}</a></li>
</ul>
</div>
And in your controller:
$scope.items = ['action 1','action 2','action 3'];
$scope.selectItem = function(item) {
$scope.selectedItem = item;
}
See this plnkr: http://plnkr.co/edit/RZoMoa2t3JZDNiZ3eQoW?p=preview
Related
HTML code
<div class="card-header">
<h5>Refill by date</h5>
<div class="card-header-right">
<nav class="navbar bg-faded ">
<ul class="nav navbar-nav">
<li class="nav-item" routerLinkActive="active">
<button (click)="setView('branch'); getFranchiseRefillsByDateAndBranch()" class="btn btn-mini btn-bg-c-blue btn-outline-default btn-round btn-action">
<i class="icofont icofont-ui-check"> By branch</i>
</button>
</li>
<li class="nav-item" routerLinkActive="active">
<button (click)="setView('product'); getFranchiseRefillsByDateAndProduct()" class="btn btn-mini btn-bg-c-blue btn-outline-default btn-round btn-action">
<i class="icofont icofont-ui-check"> By product</i>
</button>
</li>
<li class="nav-item" routerLinkActive="active">
<button (click)="setView('list'); getFranchiseRefillsByDateAndList()" class="btn btn-mini btn-bg-c-blue btn-outline-default btn-round btn-action">
<i class="icofont icofont-ui-check"> Refill list</i>
</button>
</li>
</ul>
</nav>
</div>
</div>
part of TS code
getFranchiseRefillsByDateAndBranch() {
this.items = [];
var hrchyIds = this.jwtHelperService.getFRefillHrchyIds();
var ym = this.localStorage.retrieve('frym');
if (hrchyIds) {
this.refillService.getFranchiseRefillsByDateAndYear(hrchyIds, ym, "branch", this.page, this.rec).subscribe(val => {
this.items = val;
});
}
}
CSS code
.nav-item.active button i{
color: #3D94CD !important;
}
I am trying to change color of active button using router link active but this method does not work in this case, is their any alternate way of adding class dynamically, based on current click.
routerLinkActive works if there was a routerLink on this element.
Keep currentActiveItem variable in ts file. Set some default value say "branch"
currentActiveItem : string = "branch"
Change value of this variable in setView function.
And additionally also use ngClass as following on correspondiong li elements.
[ngClass]="{'active' : currentActiveItem == 'branch'}"
[ngClass]="{'active' : currentActiveItem == 'product'}"
[ngClass]="{'active' : currentActiveItem == 'list'}"
I am trying to get a dropdown and a multi-toggle (radio buttons) to stay aside of each other. However, I can't get why they keep appearing of different size... I use bootstrap 4.0.
here is the html snippet of my header
<div id="header">
<p style="margin:0px;"><img src="assets/logo2.svg" width="63" height="14" style="left: 0px; top: 0px; border: 0;"></p>
<h1 id="title">Price Indicies</h1>
<div id="myDropdown" class="dropdown float-right">
<button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">Boroughs
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Boroughs</a>
<a class="dropdown-item" href="#">Brooklyn hoods</a>
<a class="dropdown-item" href="#">Manhattan hoods</a>
<a class="dropdown-item" href="#">Queens hoods</a>
</div>
</div>
<div class="btn-group float-right" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="sales" autocomplete="off">sales</input>
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="rentals" autocomplete="off">rentals</input>
</label>
</div>
</div>
Here is the live code:
https://run.plnkr.co/64KRhkyz35xXoeMw/
I am assuming you want them to the the same heihgt as the drop down button. Your buttons are smaller because there is no text in them. If you were to add a space ( ) they would be the size of the normal bootstrap button. Then you would need to add the btn-sm class to make them the same size as the drop down button (or remove that class from the dropdown button).
You can use following css to have dropdown and radio button of same size
label.btn.btn-primary {
padding :13px;
}
I use bootstrap 3.
I have an bootstrap-table, on top of it, i have a button group i would like to align to the right of the table. Actually is a the left
http://jsfiddle.net/65uckof7/
<div id="toolbar" class="btn-group">
<button class="btn btn-primary">
Actions
</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
Anuler
</li>
<li>
Sauvegarder
</li>
<li class="dropdown dropdown-submenu"><a class="dropdown-toggle" href="#" data-toggle="dropdown">Payez</a>
<ul class="dropdown-menu">
<li>Comptant</li>
<li>Débit</li>
<li>Chèque</li>
</ul>
</li>
</ul>
</div>
Do you want the action button to be on the right?
If that's the case from your fiddle I just had to add the following CSS rule:
.fixed-table-toolbar .pull-left {
float: right !important;
}
You need this because from the CSS on the fiddle the class .pull-left (the one which contains the buttons) is set to: float: left !important; so you just need to set it to right with the CSS I've provided
For Bootstrap 2.3, see: http://getbootstrap.com/2.3.2/components.html#misc-> Helper Classes -> .pull-right
For Bootstrap 3, see: http://getbootstrap.com/css/#helper-classes -> Helper classes
So, insert 'pull-right' into the class string and let bootstrap arrange the buttons.
Juste add .pull-right to .fixed-table-toolbar
use pull-right class instead of pull-left
In WordPress, there is default Archives widget that displays a form select with the list of monthly archives and on change executes:
document.location.href=this.options[this.selectedIndex].value;
I need the same functionality but styled like a Bootstrap dropbdown
<div class="btn-group dropdown">
<button class="btn btn-link">Dropdown Button</button>
<button class="btn dropdown-toggle btn-large" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
How can I achieve this?
Is there any class that I could add to the select, so that I get the Bootstrap dropdown style along with the same functionality?
There's no way of modifying the output for that widget. You have to copy the whole WP_Widgets_Archives and create your own widget.
See the Widgets_API and this old, but still valid article: The complete guide to creating widgets in WordPress 2.8.
You'll have to place your code in this block:
if ( $d ) {
?>
<div class="btn-group dropdown">
<button class="btn btn-link">Dropdown Button</button>
<button class="btn dropdown-toggle btn-large" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<?php wp_get_archives( array('type' => 'monthly', 'format' => 'html', 'show_post_count' => $c)); ?>
</ul>
</div>
<?php
}
Note the format html for wp_get_archives, this produces a <li> list.
If you are using SASS
#import "~bootstrap/scss/bootstrap";
.widget_archive select {
#extend .form-control;
}
I'm using twitter bootstrap.
I'm trying to create a button with dropdown that should be displayed right after a text.
The button and everything are created but it appears on the next line instead of being on the same line as my texte.
This is more or less the code:
<h1> Some title
<div class="btn-group" xmlns="http://www.w3.org/1999/html">
<button class="btn btn-mini">Edit</button>
<button class="btn btn-mini dropdown-toggle data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li> ...my menu's...</li>
</ul>
</div>
</h1>
The h1 tag has no special positioning assigned. I've tried to add a float: left to the h1 tag but it doesn't work because there is a clear:both in the btn-group's css.
What's wrong? Thx!
UPDATE:
I also tried to add a .pull-right class to the div. This brings it to the right line but it is on the right of the page. Not just after the text. This is too far away.
I don't really know how you got that markup, but here is a working version : (demo on jsfiddle)
<h1> Some title
<small>
<span class="btn-group">
<button class="btn btn-mini">Edit</button>
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>...my menus...</li>
</ul>
</span>
</small>
</h1>
h1 .btn-group { display: inline-block; }
I only suggest you to use the <small> tag, because it sets some different styles from <h1>. But it is not required for this to work.