i have a button dropdown with options and it works as i want, but i need to remove te input circle image in options, is it possible?
or any other idea? thanks!
<div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Menu 2</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item"><input type="radio" name="options" value="type1" autocomplete="off" data-bind="checked: type"> option 1 </a>
<a class="dropdown-item"><input type="radio" name="options" value="type2" autocomplete="off" data-bind="checked: type"> option 2 </a>
</div>
</div>
Just add this css rule :
input[type="radio"] {
visibility:hidden;
}
Related
My Blazor application has the following dropdown with checkboxes:
<div class="dropdown" style="position: absolute; top:0; right:0; ">
<button type="button" class="btn btn-lg dropdown-toggle" aria-haspopup="true" aria-expanded="false">Choose Columns</button>
<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownButton1" >
<li><label><input type="checkbox" style="height:auto;" #bind="showDepartment"/> Department</label></li>
[... Numerous other Checkboxes ...]
<li><label><input type="checkbox" style="height:auto;" #bind="showName" /> Name</label></li>
</ul>
</div>
Everytime I click a checkbox in the dropdown, the dropdown disappears. I want it to only disappear when I click on the name of the dropdown or when I click outside of the dropdown. Is that possible to do somehow?
In the following code, I want to submit a form with a Bootstrap dropdown and submit the selected value as "username". I'm not sure where in the following code I should add 'name="username"'. When I add it in certain places, it does not get set properly.
<form action="/login" method="POST">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
<input type="submit" value="Login">
</div>
</form>
Below is an example of code that does exactly what I want it to. But for design purposes, I'd like the form to be in Bootstrap.
<form action="/login" method="POST">
<select class="form-control" name="username">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input type="submit" value="Login">
</form>
Replace the links in the list (the ones that currently link to the top of the page) with radio buttons and labels.
We can add radio buttons for every list item, each giving them a unique value and name="username". Wrap the text of every list item into a label with a for tag that points to the id of the corresponding radio button.
After that, the only thing that is left to do is wrapping the dropdown label into a span with id='userlabel', and use this script to change the label of the dropdown menu to the selected list item. This will give the user an idea of which item is currently selected:
$("input[name='username']").change(function(e){
$("#usernamelabel").text($(this).val());
});
We can hide the radio buttons with
input[name='username']{
display: none;
}
The resulting html will look like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form action="/login" method="POST">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span id="usernamelabel">Select username</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><input type="radio" id="username1" name="username" value="username1"><label for="username1">Username1</label></li>
<li><input type="radio" id="username2" name="username" value="username2"><label for="username2">Username2</label></li>
<li><input type="radio" id="username3" name="username" value="username3"><label for="username3">Username3</label></li>
</ul>
<input type="submit" value="Login">
</div>
</form>
<style>
input[name='username']{
display: none;
}
</style>
<script>
$("input[name='username']").change(function(e){
$("#usernamelabel").text($(this).val());
});
</script>
I basically have a button group with one button that is sometimes disabled ("Corpus delicti"). In the case it is disabled I want to show the user an explanation via a popover.
Since disabled elements require wrapper elements I wrapped a div around the button - what messed the styling up.
So I followed Bootstrap's hint "to specify the option container: 'body'" but styling is still messed up.
This is the markup, find it also in this fiddle:
https://jsfiddle.net/7ben7zmg/
<div class="btn-group" role="group">
<button onclick="console.log('huh')" type="button" class="btn btn-default">Log-Datei</button>
<div class="btn-group" role="group">
<div data-container="body" data-toggle="popover" data-placement="right" data-content="Lorem ipsum..." data-trigger="hover" data-html="true">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled=""></button>
</div>
Corpus delicti <span class="caret"></span>
<ul class="dropdown-menu">
<li>deutsch</li>
<li>englisch</li>
</ul>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Infoseite <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>deutsch</li>
<li>englisch</li>
</ul>
</div>
<button type="button" class="btn btn-default">TCP-Dump</button><button type="button" class="btn btn-default">Diesen Kunden deaktivieren</button>
</div>
Have no clue what I can do. Please help.
Apply data-toggle:popover in the btn-group instead of wrapping in other div..
Wrapping to another div will disturb your layout..
Updated Fiddle
I am trying to create a a group of controls with bootstrap however it does not seem to be rendering properly, I have an example here: https://jsfiddle.net/brightertools/jxafnoyx/
Code:
<form id="form" name="form" action="" method="post">
<div class="container">
<div class="form-group">
<label class="control-label" for="SelectOption">Select an Option</label>
<div class="input-group">
<select id="SelectOption" name="SelectOption" class="form-control">
<option value="">(select your option)</option>
</select>
<div class="input-group-btn ">
<button type="button" class="btn btn-default glyphicon glyphicon-plus" style="margin-top:-1px;" id="AddButton"></button>
<button type="button" class="btn btn-default dropdown-toggle glyphicon glyphicon-cog" style="margin-top:-1px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="GroupDropdown"></button>
<ul class="dropdown-menu">
<li><a id="EditLink">Edit</a>
</li>
<li><a id="DeleteLink">Delete</a>
</li>
</ul> <span class="input-group-addon"><span class="validation-icon glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
</div>
</div>
</form>
One can see that the addon is wrapping, I cannot seem to fix this issue.
Current rendering within jsfiddle:
As Onkar Deshpande mentioned correctly in his comment
"multiple form-controls in a single input group are not supported".
Input groups
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
We do not support multiple add-ons on a single side.
We do not support multiple form-controls in a single input group.
But there is a little work around you could use to make this work.
Just make sure to move your input-group-addon out of the input-group-btn div.
To make this look correct you would have to also remove the border-radius on the .btn class.
.btn {
border-radius: 0 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<form id="form" name="form" action="" method="post">
<div class="container">
<div class="form-group">
<label class="control-label" for="SelectOption">Select an Option</label>
<div class="input-group">
<select id="SelectOption" name="SelectOption" class="form-control">
<option value="">(select your option)</option>
</select>
<div class="input-group-btn ">
<button type="button" class="btn btn-default glyphicon glyphicon-plus" style="margin-top:-1px;" id="AdvertiserEditButton"></button>
<button type="button" class="btn btn-default dropdown-toggle glyphicon glyphicon-cog" style="margin-top:-1px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="AdvertiserDropdown"></button>
<ul class="dropdown-menu">
<li><a id="AdvertiserEditLink">Edit</a>
</li>
<li><a id="AdvertiserDeleteLink">Delete</a>
</li>
</ul>
</div>
<span class="input-group-addon"><span class="validation-icon glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
</div>
</form>
You can try like this: Demo
<div class="input-group">
<select id="SelectOption" name="SelectOption" class="form-control">
<option value="">(select your option)</option>
</select>
<div class="input-group-btn">
<button type="button" class="btn btn-default "><i class="glyphicon glyphicon-plus"></i></button>
<button type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="AdvertiserDropdown"><i class="glyphicon glyphicon-cog"></i></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<span class="input-group-addon validation-icon glyphicon glyphicon-asterisk"></span> </div>
<!-- /.input-group -->
This is my code: http://jsfiddle.net/52VtD/7462/
I'm trying to put my dropdown and buttons on the same line. But I can't do that because the dropdown is a div and stays on the line below. How can I put them on the same line?
<div class="panel panel-default">
<div class="panel-heading">
<input type="checkbox">
<button type="submit" class="btn btn-xs btn-default">Stage</button>
<button type="submit" class="btn btn-xs btn-default">Add Label</button>
<button type="submit" class="btn btn-xs btn-default">Send Message</button>
<button type="submit" class="btn btn-xs btn-default">Archive</button>
<div class="dropdown">
<button class="btn btn-xs btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Assign to<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Unsorted <span class="badge">12</span></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action <span class="badge">42</span></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here <span class="badge">42</span></a></li>
</ul>
</div>
</div>
Test
</div>
Never override or modify bootstrap base classes.. Always add new class or identity. You can do it like this :
Add new class "div-inline" to div with class dropdown..
Add this css
.div-inline{
display:inline-block;
}
JSFIddle : http://jsfiddle.net/rahulrulez/52VtD/7464/
As of bootstrap 4, you can change the dropdown line from:
<div class="dropdown">
to:
<div class="dropdown d-inline-block">
That will make all the buttons show up in one line.
Add this to your CSS:
.dropdown{
display: inline;
}
fiddle
I have just one drop down button and a few "normal" buttons. I am using bootstrap and did not want to get into editing CSS, so I resolved the issue as follows. It works, it is on one line, but the above solutions will work better if you have more than one dropdown on the same line.
I wrapped the whole thing (normal buttons and dropdown) into a <div class="row">. I then changed the <div class="dropdown> of the dropdown to <div class="dropdown col-sm-1" style="margin-right: 2%">. It did the trick.
My code looks like this:
<div class="row">
<spring:url value="/person/${person.id}/addaddress" var="addaddressUrl" />
<button class="btn btn-info"
onclick="location.href='${addaddressUrl}'">Add Address</button>
<spring:url value="/person/${person.id}/addphone" var="addphoneUrl" />
<button class="btn btn-primary"
onclick="location.href='${addphoneUrl}'">Add Phone</button>
<spring:url value="/person/${person.id}/addemail" var="addemailUrl" />
<button class="btn btn-success"
onclick="location.href='${addemailUrl}'">Add Email</button>
<spring:url value="/person/${person.id}/addpass" var="addpassUrl" />
<button class="btn btn-default"
onclick="location.href='${addpassUrl}'">Add Pass</button>
<spring:url value="/person/${person.id}/addnote" var="addnoteUrl" />
<button class="btn btn-warning"
onclick="location.href='${addnoteUrl}'">Add Note</button>
<div class="dropdown col-sm-1" style="margin-right: 2%">
<spring:url value="/person/${person.id}/role1" var="role1Url" />
<spring:url value="/person/${person.id}/role2" var="role2Url" />
<spring:url value="/person/${person.id}/role3" var="role3Url" />
<spring:url value="/person/${person.id}/role4" var="role4Url" />
<spring:url value="/person/${person.id}/role5" var="role5Url" />
<spring:url value="/person/${person.id}/role6" var="role6Url" />
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown"
>Add Role
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>role1</li>
<li>role2</li>
<li>role3</li>
<li>role4</li>
<li>role5</li>
<li>role6</li>
</ul>
</div>