The placement does not work for "top-right". Just goes to the default.
My packages:
"#ng-bootstrap/ng-bootstrap": "^1.0.0-beta.1",
"bootstrap": "^4.0.0-beta",
<div ngbDropdown placement="top-right" class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic2" ngbDropdownToggle>Auto Fill Queue From
Library
</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic2">
<button class="dropdown-item" (click)="rebuild(3)">4 More Days</button>
<button class="dropdown-item" (click)="rebuild(3)">3 More Days</button>
<button class="dropdown-item" (click)="rebuild(2)">2 More Days</button>
<button class="dropdown-item" (click)="rebuild(1)">Through Tomorrow</button>
<button class="dropdown-item" (click)="rebuild(0)">Rest of Today</button>
</div>
</div>
The placement option for ng-bootstrap dropdowns was added only in ng-bootstrap 1.0.0-beta.2 so you need to update your version of ng-bootstrap. More info can be found in the CHANGELOG.
With the version updated it works perfectly fine, you can verify it here: http://plnkr.co/edit/jZIt2YDWdqUOxCESig41?p=preview.
Related
I am trying to use bootstrap 5's off canvas.
The css & js associated with the plugin do not seem to be included in the framework.
https://deploy-preview-29017--twbs-bootstrap.netlify.app/docs/5.0/components/offcanvas/
The demo on the BS website works; However, the github link on the BS website goes to a 404.
https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/offcanvas.md
Bootstap 5 beta 3 (Update 2021)
Bootstrap has finally introduced an official Offcanvas component! From the offical blog...
"..the offcanvas comes with configurable backdrop, body scroll, and
placement. Offcanvas components can be placed on the left, right, and
bottom of the viewport..."
Bootstrap Offcanvas demo
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Open Sidebar
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div> Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. </div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"> Dropdown button </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
Read more
Bootstap 5 beta 2 (Original answer)
As you can see in the official Bootstrap docs, there is not (yet) a Off-canvas component in Bootstrap 5 beta. The netlify docs you referenced are based on an older pre-alpha build.
The Bootstrap 5 examples do show an experimental off-canvas layout, but like the other examples it requires extra custom CSS and JS that can be found here in the Bootstrap GH repo
Once you include the extra CSS/JS, the off-canvas example works as expected.
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 want to show a button with btn-lg size in extra small devices. and show same button with btn-xs size in another devices.
So is there better suggestion of below code?
<div class="hidden-xs">
<a class="btn btn-default btn-xs" href="#"><i class="fa fa-undo" aria-hidden="true"></i> Back</a>
</div>
<div class="visible-xs-block">
<a class="btn btn-default btn-lg" href="#"><i class="fa fa-undo" aria-hidden="true"></i> Back</a>
</div>
Given that I may have a piece of code is much bigger than a button code. Like this:
<div class="hidden-xs">
<!-- A LONG AND COMPLEX CODE IN HERE -->
</div>
<div class="visible-xs-block">
<!-- SAME LONG AND COMPLEX CODE IN HERE (with just change some classes of size) -->
</div>
Is there a way to assign more than one event to a bootstrap control via "data-toggle".
For example, lets say I want a button that has a "tooltip" and a "button" toggle assigned
to it.
Tried data-toggle="tooltip button", but only the tooltip worked.
EDIT:
This is easily "workaroundable" with
$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");
If you want to add a modal and a tooltip without adding javascript or altering the tooltip function, you could also simply wrap an element around it:
<span data-bs-toggle="modal" data-bs-target="modal">
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip">
Hover Me
</a>
</span>
Since tooltip is not initialized automatically, you can make changes in your initialization of the tooltip. I did mine like this:
$(document).ready(function() {
$('body').tooltip({
selector: "[data-tooltip=tooltip]",
container: "body"
});
});
with this markup:
<button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-info" title="Your tooltip">Text here</button>
Notice the data-tooltip.
Update
Or simply,
$('[data-tooltip="tooltip"]').tooltip();
I managed to solve this issue without the need to change any markup with the following piece of jQuery. I had a similar problem where I wanted a tooltip on a button that was already using data-toggle for a modal. All you will need to do here is add the title to the button.
$('[data-toggle="modal"][title]').tooltip();
This is the best solution that I just implemented:
HTML
<a data-toggle="tooltip" rel="tooltip" data-placement="top" title="My Tooltip text!">Hover over me</a>
JAVASCRIPT that you anyway need to include regardless of what method you use.
$('[rel="tooltip"]').tooltip();
Not yet. However, it has been suggested that someone add this feature one day.
The following bootstrap Github issue shows a perfect example of what you are wishing for. It is possible- but not without writing your own workaround code at this stage though.
Check it out... :-)
https://github.com/twitter/bootstrap/issues/7011
Since Bootstrap forces you to initialize tooltips only through Javascript, I changed data-toggle="tooltip" (since it's useless then) to class="bootstrap-tooltip" and used this Javascript to initialize my tooltips:
$('.bootstrap-tooltip').tooltip();
And so I was free to use the data-toggle attribute for something else (e.g. data-toggle="button").
I use href to load the modal and leave data-toggle for the tooltip:
<a
data-toggle="tooltip"
data-placement="top"
title="My Tooltip text!"
href="javascript:$('#id').modal('show');"
>
+
</a>
Just for complement #Roman Holzner answer...
In my case, I have a button that shows the tooltip and it should remain disabled until furthermore actions. Using his approach, the modal works even if the button is disabled, because its call is outside the button - I'm in a Laravel blade file, just to be clear :)
<span data-toggle="modal" data-target="#confirm-delete" data-href="{{ $e->id }}">
<button name="delete" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
<i class="fa fa-trash fa-fw"></i>
</button>
</span>
So if you want to show the modal only when the button is active, you should change the order of the tags:
<span data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
<button name="delete" class="btn btn-default" data-href="{{ $e->id }}" data-toggle="modal" data-target="#confirm-delete" disabled>
<i class="fa fa-trash fa-fw"></i>
</button>
</span>
If you want to test it out, change the attribute with a JQuery code:
$('button[name=delete]').attr('disabled', false);
One more solution:
<a data-toggle="modal" data-target="#exampleModalCenter">
<span
class="tags"
data-toggle="tooltip"
data-placement="right"
title="Tooltip text"
>
Text
</span>
</a>
There is a nice solution using class .stretched-link. Button must have a class .position-relative. Here is a full working example:
Tooltip must be added to the button otherwise its position will be incorrect.
$('[data-toggle="tooltip"]').tooltip();
/*DEMO*/.btn{margin-left:5rem;margin-top:5rem}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!--BUTTON-->
<button class="btn btn-primary position-relative" data-toggle="tooltip" data-trigger="hover" data-placement="left" title="Tooltip text">
<span class="stretched-link" data-toggle="modal" data-target="#exampleModal"></span>
Click Me!
</button>
<!--DEMO MODAL-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body">Modal body</div></div></div></div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
When you opening modal on a tag and want show tooltip and if you implement tooltip inside tag it will show tooltip nearby tag. like this
I will suggest that use div outside a tag and use "display: inline-block;"
<div data-toggle="tooltip" title="" data-original-title="Add" style=" display inline-block;">
<a class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="setSelectedRoleId(6)">
<span class="fa fa-plus"></span>
</a>
</div>
I've also tried to use
<span></span>
but
<a></a>
worked great for me.
Here you are:
<button type="button" class="btn btn-danger" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Some word here">
<a data-bs-toggle="tooltip" title="Example">Some info here</a>
</button>
Even better, try to wrap the entire button (that uses popover) with a div:
<div data-bs-toggle="tooltip" title="Something">
<button type="button" class="btn btn-danger" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Some word here">
Button label
</button>
</div>
HTML (ejs dianmic web page): this is a table list of all users and from nodejs generate the table. NodeJS provide dinamic "<%= user.id %>". simply change for any value like "54"
<span type="button" data-href='/admin/user/del/<%= user.id %>' class="item"
data-toggle="modal" data-target="#confirm_delete">
<div data-toggle="tooltip" data-placement="top" title="Delete" data-
toggle="modal">
<i class="zmdi zmdi-delete"></i>
</div>
</span>
<div class="modal fade" id="confirm_delete" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true"
data-backdrop="static">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticModalLabel">Static Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body">
<p> This is a static modal, backdrop click will not close it. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<form method="POST" class="btn-ok">
<input type="submit" class="btn btn-danger" value="Confirm"></input>
</form>
</div>
</div>
</div>
</div>
<!-- end modal static -->
JS:
$(document).ready(function(){
$('#confirm_delete').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('action', $(e.relatedTarget).data('href'));
});
});
<a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</a>
I'm using Bootstrap, and I'd like to set an entire btn-group to have a width of 100% of its parent element. I'd also like the inner buttons to take equal widths. As it is, I can't achieve either.
I've made a JSFiddle here: http://jsfiddle.net/BcQZR/12/
Here is the HTML:
<div class="span8 background">
<div class="btn-group btn-block" id="colours">
<span class="btn"><input type='checkbox' name='size' value='red'/>red</span>
<span class="btn"><input type='checkbox' name='size' value='orange'/>orange</span>
<span class="btn"><input type='checkbox' name='size' value='yellow'/>yellow</span>
</div> <!-- /btn-group -->
</div>
And here is my current CSS, which doesn't work:
#colours {
width: 100%;
}
Bootstrap has the .btn-group-justified css class.
How it's structured is based on the type of tags you use.
With <a> tags
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
With <button> tags
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
There's no need for extra css the .btn-group-justified class does this.
You have to add this to the parent element and then wrap each btn element in a div with .btn-group like this
<div class="form-group">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="submit" id="like" class="btn btn-lg btn-success ">Like</button>
</div>
<div class="btn-group">
<button type="submit" id="nope" class="btn btn-lg btn-danger ">Nope</button>
</div>
</div>
</div>
BOOTSTRAP 2 (source)
The problem is that there is no width set on the buttons. Try this:
.btn {width:20%;}
EDIT:
By default the buttons take an auto width of its text length plus some padding, so I guess for your example it is probably more like 14.5% for 5 buttons (to compensate for the padding).
Note:
If you don't want to try and compensate for padding you can use box-sizing:border-box;
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
I don't like the solution of settings widths on .btn because it assumes there'll always be the same number of items in the .btn-group. This is a faulty assumption and leads to bloated, presentation-specific CSS.
A better solution is to change how .btn-group with .btn-block and child .btn(s) are display. I believe this is what you're looking for:
.btn-group.btn-block {
display: table;
}
.btn-group.btn-block > .btn {
display: table-cell;
}
Here's a fiddle: http://jsfiddle.net/DEwX8/123/
If you'd prefer to have equal-width buttons (within reason) and can support only browsers that support flexbox, try this instead:
.btn-group.btn-block {
display: flex;
}
.btn-group.btn-block > .btn {
flex: 1;
}
Here's a fiddle: http://jsfiddle.net/DEwX8/124/
For bootstrap 4 just add this class:
w-100
Bootstrap 4 removed .btn-group-justified. As a replacement you can use <div class="btn-group d-flex" role="group"></div> as a wrapper around elements with .w-100.
Try this:
<div class="btn-group d-flex" role="group>
<button type="button" class="btn btn-primary w-100">Submit</button>
<button type="button" class="btn btn-primary w-100">Cancel</button>
</div>
Angular - equal width button group
Assuming you have an array of 'things' in your scope...
Make sure the parent div has a width of 100%.
Use ng-repeat to create the buttons within the button group.
Use ng-style to calculate the width for each button.
<div class="btn-group"
style="width: 100%;">
<button ng-repeat="thing in things"
class="btn btn-default"
ng-style="{width: (100/things.length)+'%'}">
{{thing}}
</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group btn-block">
<button type="button" data-toggle="dropdown" class="btn btn-default btn-xs btn-block dropdown-toggle">Actions <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span></button><ul role="menu" class="dropdown-menu"><li>Action one</li><li class="divider"></li><li><a href="#" >Action Two</a></li></ul></div>
Bootstrap 4
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Bootstrap 4 Solution
<div class="btn-group w-100">
<button type="button" class="btn">One</button>
<button type="button" class="btn">Two</button>
<button type="button" class="btn">Three</button>
</div>
You basically tell the btn-group container to have width 100% by adding w-100 class to it. The buttons inside will fill in the whole space automatically.