I am trying to include an input text in a bootstrap dropdown menu. But when I click the input text the menu disappears. This is the html code:
<th width="25px;">
<div class="dropdown">
<button class="btn btn-default btn-sm" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
N°
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
<label for="usr">Find:</label>
<li><input type="text" class="form-control"/></li>
<li>Asc</li>
<li>desc</li>
</ul>
</div>
</th>
I put the followng javascript, but it doesn't work:
$('.dropdown-menu input').click(function(e) {
e.stopPropagation();
});
Any help would be great.
Related
Here is the code
some.component.html
<div class="btn-group dropdown" normalizePosition ng-click="toggle()">
<button class="dropdown-toggle btn btn-sm btn-primary"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-cog"></i><span class="caret"></span> {{l("Edit")}}
</button>
<ul class="dropdown-menu">
<li>
<a (click)="openReport(id)">{{l('Run Report')}}</a>
</li>
</ul>
some.component.ts
openReport(id): void {
this.router.navigate(['/app/main/sale/viewer', id]);
}
When you are navigated to the sale viewer page in the browser the button is still showing and I'm not sure how to remove this after it's been clicked. Does anyone have ideas?
I used the toggle technique but I didn't like it.
<div class="btn-group col-sm-2 col-md-2 col-lg-2">
<label>Patient Type</label>
<button class="form-control btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" name="Transaction">
Choose Type
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li href="#corp-toggle" value="Walk-In" data-toggle="collapse">
Walk-In
</li>
<li href="#corp-toggle" value="Corporate" data-toggle="collapse">
Corporate
</li>
</ul>
</div>
<div id="corp-toggle" class="collapse col-sm-5 col-md-5 col-lg-5">
<label>Please Specify your Company:</label>
<button class="form-control btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" name="Transaction">
Choose Company
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li href="#corp-toggle" value="Walk-In" data-toggle="collapse">
Walk-In
</li>
<li href="#corp-toggle" value="Corporate" data-toggle="collapse">
Corporate
</li>
</ul>
</div>
Thanks guys! I've already resolved it using JS. The initial problem before was if the selection is Walk-In from the drop down list, then the other drop would be hidden. If the selection is Corporate, then the other drop down list would be visible.
the JS code was
function show(frm) {
if (frm.Transaction.value == "Corporate") {
document.getElementById("hide").style.visibility = "visible";
document.getElementById("show").style.visibility = "visible";
}else{
document.getElementById("show").style.visibility = "hidden";
document.getElementById("hide").style.visibility = "hidden";
}
}
I called the function from the first dropdown form:
select class="form-control" Name="Transaction" onClick="show(this.form)
Then called the :
id="show" style="visibility:hidden"
from the second dropdown form
I'm trying to make the values of my two bootstrap dropdown menus selectable. The site can be viewed here.
As you can see I have customised the dropdown menu's slightly within the CSS.
HTML:
<!-- City Dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select City <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
<li>All</li>
<li class="dropdown-header">City</li>
<li>Manchester</li>
<li>Liverpool</li>
<li>London</li>
<li>Newcastle</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Town</li>
<li>Wigan</li>
<li>St Helens</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Other</li>
<li>Warwick</li>
<li>Oxford</li>
<li>Cambridge</li>
</ul>
</div>
<!-- Version Dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Version <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
<li>All</li>
<li>V1</li>
<li>V2</li>
<li>V3</li>
<li>V4</li>
<li>V5</li>
<li>V6</li>
<li>V7</li>
<li>V8</li>
</ul>
</div>
</div>
</div>
</div>
Thanks!
I used the answer posted by "GL.awog" - Consider silviomoreto.github.io/bootstrap-select, the standard bs dropdown menu is simply for navigation, not working as a select.
The site was easy to follow and I had this working in minutes :)
I have this code, but selection doesn't work.
<div class="input-group-btn">
<button id="entity" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Students
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Teachers</li>
<li>Classes</li>
</ul>
</div>
<input type="text" id="s" class="form-control" aria-label="..." oninput="f()">
Check this simplest Dropdown menu Dropdown Bootstrap
I am not sure what exactly you are trying to get though.
I am having a problem keeping bootstrap dropdown button focused when clicked(:focus) on the input field inside the dropdown.
<div id="select_btn">
<div class="btn-group">
<button class="btn btn-custom-select btn-group show-properties dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="select-p-text">Select a Property
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<div id="propertyHolder">
<div class="right-inner-addon">
<i class="fa fa-search"></i>
<input placeholder="Search for a property..." id="box" type="search" />
</div>
<li role="separator" class="divider"></li></div>
<li><ul class="selectList">
</ul>
</li>
</div>
</ul>
</div>