Using BS4 the custom switch/checkbox can be added to the form. Unfortunately - the small (-sm) modification wont work. I attach a code sample and an image.
https://www.codeply.com/p/gZuRjGvqG2
What I want to achieve is to get the switch become as small (in height) as the input field itself. I cannot find "custom-control-sm" or similar class, and form-control-sm wont work.
<div class="input-group input-group-sm">
<span class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-table"></i>
</span>
</span>
<span class="input-group-prepend">
<span class="input-group-text">
<span class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input form-control-sm" aria-autocomplete="none" autocomplete="off" id="DefineAttributes" name="DefineAttributes" title="Define the attributes" value="true">
<label class="custom-control-label form-control-sm" for="DefineAttributes"></label>
</span>
</span>
</span>
<input type="text" class="form-control" aria-autocomplete="none" autocomplete="off" id="Attributes" name="Attributes" placeholder="Attributes ..." value="something">
<span class="input-group-append">
<a class="btn btn-sm btn-outline-primary " title="Select attributes" href="#">Select</a>
</span>
</div>
Had to do the following changes:
Add p-0 to <span class="input-group-text"> (the one for the checkbox).
Add "style=height: 0;" to <input type="checkbox" ... & <label class="custom-control-label ... to remove any height the invisible element has.
Adjust the position of the resultant slider with custom margins on the <span class="custom-control custom-switch">, i.e., added: "style="margin-left: 24px; margin-right: -12px;"
This should result in a proper looking slider, and in the sm size.
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;
}
In an MVC 5 project, with the default bootstrap layout, I am using the following code to set all inputs of a certain class to jQuery UI Datepicker widgets:
$(".jqueryui-marker-datepicker").datepicker({
dateFormat: "yy-mm-dd",
changeYear: true,
showOn: "button"
}).next("button").button({
icons: { primary: "ui-icon-calendar" },
label: "Select a date",
text: false
});
Here is the HTML that is rendered by Razor and jQuery UI after the above call executes, minus some aria and validation data attributes:
<div class="form-group">
<label class="control-label col-md-2" for="Time">Date</label>
<div class="col-md-10">
<input class="form-control jqueryui-marker-datepicker hasDatepicker valid" id="Time" name="Time" type="text" value="2015-05-02">
<button type="button" class="ui-datepicker-trigger ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" title="Select a date">
<span class="ui-button-icon-primary ui-icon ui-icon-calendar"></span><span class="ui-button-text">Select a date</span>
</button>
<span class="text-danger field-validation-valid" data-valmsg-for="Time" data-valmsg-replace="true"></span>
</div>
</div>
The problem with this is that datepicker button appears below the date input. This is because the bootstrap .form-control class makes gives the input a display: block. If I edit this in Chrome's console to inline-block the button appears immediately to the right of the input, exactly where I want it.
Now I could add a new css rule as follows:
.form-control.jqueryui-marker-datepicker {
display: inline-block;
}
but I'm just not sure if this is the neatest way to do this, with the least impact on all the layout magic that bootstrap is doing.
The bootstrap metaphor for displaying buttons next to inputs is to use an input-group like this:
<div class="input-group">
<input type="date" class="form-control" placeholder="Date" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar" ></span>
</button>
</span>
</div>
You can tweak your script to format the output to add these classes and html structure by wrapping the contents like this:
$(".jqueryui-marker-datepicker")
.wrap('<div class="input-group">')
.datepicker({
dateFormat: "yy-mm-dd",
changeYear: true,
showOn: "button"
})
.next("button").button({
icons: { primary: "ui-icon-calendar" },
label: "Select a date",
text: false
})
.addClass("btn btn-default")
.wrap('<span class="input-group-btn">')
.find('.ui-button-text')
.css({
'visibility': 'hidden',
'display': 'inline'
});
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<input type="text" class="jqueryui-marker-datepicker form-control">
Alternative w/ Bootstrap
That being said, this is a pretty convoluted way to do this. I'd add a native bootstrap glyphicon instead of trying to force the button to display correctly. It's also pretty uncommon to mix jQuery-UI and Bootstrap as there is a lot of overlap in functionality and they don't always play nice together. I would recommend looking into just extending bootstrap with a datepicker plugin.
Here's an example using bootstrap-datepicker
$('.datepicker').datepicker({});
//
$('.datepicer-icon').on('click', '.btn', function(e) {
$(e.delegateTarget).find('.datepicker').focus();
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>
<div class="container" >
<h3>With Input Group</h3>
<div class="input-group datepicer-icon">
<input type="text" class="form-control datepicker" placeholder="Date" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar" ></span>
</button>
</span>
</div>
<h3>With Feedback</h3>
<div class="form-group has-feedback">
<input type="text" class="form-control datepicker" placeholder="Date" />
<i class="glyphicon glyphicon-calendar form-control-feedback"></i>
</div>
</div>
Try this way :
<form class="form-inline">
<div class="form-group">
<label class="control-label col-md-2" for="Time">Date</label>
<div class="col-md-10">
<input class="form-control jqueryui-marker-datepicker hasDatepicker valid" id="Time" name="Time" type="text" value="2015-05-02">
<button type="button" class="ui-datepicker-trigger ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" title="Select a date">
<span class="ui-button-icon-primary ui-icon ui-icon-calendar"></span><span class="ui-button-text">Select a date</span>
</button>
<span class="text-danger field-validation-valid" data-valmsg-for="Time" data-valmsg-replace="true"></span>
</div>
</div>
</form>
Add this:
class="form-control"
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 currently trying to edit the RES userbar for my subreddit. It looks like this:
It also collapses.
I want to float almost all of the elements to the right so that they are lined up vertically. The html for the bar is:
<div id="header-bottom-right" class="res-navTop">
<div id="userbarToggle" title="Toggle Userbar" class="userbarHide">»</div>
<span class="user">
<a href="http://www.reddit.com/user/snowe2010/" style="margin-right: 2px;">
snowe2010
</a>
<span id="RESAccountSwitcherIcon"></span>
(
<span class="userkarma" title="">
<a title="link karma" href="/user/snowe2010/submitted/">9</a>
·
<a title="comment karma" href="/user/snowe2010/comments/">
2170
</a>
</span>
)
</span>
<span class="separator">|</span>
<a title="no new mail" href="http://www.reddit.com/message/inbox/" class="nohavemail" id="mail"></a>
<a id="mailCount" href="/message/unread/"></a>
<span class="separator">|</span>
<a title="no new mod mail" href="http://www.reddit.com/message/moderator/" class="nohavemail" id="modmail">mod messages</a>
<span class="separator">|</span>
<ul class="flat-list hover">
<li>
preferences</li>
</ul>
<span class="separator">|</span>
<span id="openRESPrefs">
<span id="RESSettingsButton" title="RES Settings" class="gearIcon newNotification">
</span>
</span>
<span class="separator">|</span>
<form method="post" action="/logout" class="logout hover">
<input type="hidden" name="uh" value="zoimwqbhhl59526448277e691374c3d0bc47706bb35d0045b9">
<input type="hidden" name="top" value="off">
logout
</form>
</div>
I've currently tried setting each element to a block and then floating right, but that isn't working. I've also tried setting them to display: table-cell; and aligning it, but that isn't working either.
Can anybody help me with this?
#header-bottom-right a {
display: block;
float: right;
}
#header-bottom-right .separator { display: none; }
This is a pretty unrefined approach, but it's a starter. There's plenty of room for smoothing out the rough edges if you want to continue with this approach.