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
Related
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
I use dropdownlist populated with checkboxes, as shown in the picture.
http://pokit.org/get/?7c1ecede2a99c5fc2c15f63baa153dae.jpg
Here is dropdown code, although I think it doesn't matter.
<div class="dropdown">
<a class="dropdown-toggle btn" data-toggle="dropdown" href="#">
Tipovi naknade
<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-menu-form" role="menu">
#{ int counter = 0;}
#{ string id = "SelectedTypes_" + counter.ToString() + "_";}
#foreach (var rightGroup in Model.RightGroupList)
{
<li>
<label class="checkbox">
<input id="#id" name="SelectedTypes[#counter]" value="#rightGroup.Id" data-value="#rightGroup.Id" type="checkbox" class="input-md minimal" checked />
#rightGroup.RIGHTGROUPNAME
#{ counter++;}
</label>
</li>
}
</ul>
</div>
Dropdown is located in partialview, so it's height is limited by height of that same partialview.
Is there any way for this dropdown to be visible out of bounderies of partialview, I want it to drop down as much as it can. I know it isn't the best solution, but I'll deal with scrolling later.
Could it be done by expanding partialview over entire screen?
Thanks
Edited
Here is HTML code, (all controls are in the same row div)
<div class="row">
<div class="col-md-12 col-lg-12 form-group" id="divRightGroupList">
<div class="dropdown" style="overflow: visible">
<a class="dropdown-toggle btn" data-toggle="dropdown" href="#">
Tipovi naknade
<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-menu-form" style="overflow: visible" role="menu">
<li>
<label class="checkbox">
<input id="SelectedTypes_0_" name="SelectedTypes[0]" value="1" data-value="1" type="checkbox" class="input-md minimal" checked />
LICNA INVALIDNINA (CLAN 12 ZAKONA)
</label>
</li>
</ul>
</div>
If you have a div with a defined height and the CSS style, overflow:hidden, applied, then anything inside that div that extends past the boundaries will be cut off. The only way around this is to not use overflow:hidden. If you set it either to visible (which is the default if you just remove the overflow property completely) or auto (which will enable scrollbars within the div), you'll be able to see the entire dropdown menu. However, in the latter case (overflow:auto), you will likely have to scroll to see the cut-off portion of the dropdown menu. The only way to just have it display is to go with visible.
I'm experiencing the following issue - when I add a glyphicon with a pull-right class to a li option it looks ok as long as the text within li isn't too long. If it is, the glyphicon gets pushed slightly below the text (to a next line I guess).
How can I make it stay in the same line?
<div class="btn-group btn-group-justified">
<div class="btn-group open">
<button type="button" data-toggle="dropdown" class="btn btn-default btn-danger dropdown-toggle">Input <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a id="1" class="cursor-hand">Very long text here<span class="glyphicon glyphicon-ok text-danger pull-right"></span></a>
</li>
<li><a id="2" class="cursor-hand">Empty option</a>
</li>
<li><a id="41" class="cursor-hand">Short<span class="glyphicon glyphicon-ok text-danger pull-right"></span></a>
</li>
</ul>
</div>
One more thing that is very annoying is this happens all the time in FF 30.0 (running Win XP here) while Chrome and IE (tested in 8.0) at least try to keep the text and the icon in line.
Here's a fiddle that shows the problem http://jsfiddle.net/ukgAY/
You need to remove the pull-right and position the tickbox manually : I replaced the pull-right with pright class
ul li a {position: relative }
.pright {position: absolute; right: 0;}
See http://jsfiddle.net/3JgND/
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.