We Keep Coding

Bootstrap mixed dropdown toggle

i have 2 dropdown on 1 page, 1 for logout and 1 for chart. the problem is whatever button i pressed dropdown logout always pop up. How do i separate this 2 dropdown button?
my chart
<button class="btn btn-secondary dropdown-toggle" type="button" id="chartDropdown" onclick="dropdownChart()">
Chart
</button>
<div class="dropdown-menu dropdown-menu-right" style="width:400px;" id="dropdownShow" aria-labelledby="chartDropdown">
<form class="px-2 py-2" action="{{ url('purchase') }}" method="post">
{{csrf_field()}}
<div id="items"></div>
<div class="row mx-1 px-2">
<input type="text" name="fromE" value="#" id="fromE">
<input type="text" name="mode" value="add">
<input type="text" name="total" value="" id="total">
<button type='submit' class="btn btn-primary">Purchase</button>
</div>
</form>
</div>
my logout button
<ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="dropdown()">
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-right" id="dropdownShow" aria-labelledby="navbarDropdownMenuLink">
<a class="nav-link " href="{{ route('logout') }}">Logout</a>
</div>
</li>
</ul>

Your two dropdown buttons have the same id.
Give a different ID to one of your button like id="dropdownShowChart" for the Chart button and id="dropdownShowLogout" the other one.

On click aria-expanded="false" not change and 'show' class also not addes in bootstrap dropdown Angular 5

I am using the bootstrap dropdown in my Angular project. but on click is not showing dropdown-menu. actually, after clicking, the show class not added in the drop-down and aria-expanded="false" is not change into "true
<div class="dropdown>
<button class="btn btn-secondary dropdown-toggle f-f-r f-14" type="button" id="dropdown123" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Save Button
<span class="caret"></span>
</button>
<div class="dropdown-menu f-f-r f-14 p-t-12 p-b-12" aria-labelledby="dropdown123">
<a class="dropdown-item"
<button>S1 </button>
</a>
<a class="dropdown-item">
<button>S2 </button>
</a>
<a class="dropdown-item">
<button>S3 </button>
</a>
</div>
</div>

I tried your code without your custom style classes and only added a missing " at <div class="dropdown"> and a missing > at < class="dropdown-item"> and it worked for me.
Here is the working code with the missing stuff and without your custom css.
<div class="dropdown">
<button class=" btn btn-secondary
dropdown-toggle" type="button" id="dropdown123"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Save Button <span class="caret"></span>
</button>
<div class="dropdown-menu"
aria-labelledby="dropdown123">
<a class="dropdown-item">
<button>S1</button>
</a> <a class="dropdown-item">
<button>S2</button>
</a> <a class="dropdown-item">
<button>S3</button>
</a>
</div>
</div>
If it does not work please check if you are using Bootstrap 4, maybe it was different with V3 but I dont think so, not sure though.

Is there a way to show / hide another dropdown from a different dropdown using Bootstrap?

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

Bootstrap dropdown menu disappears when the input text is clicked

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.

Keep Bootstrap dropdown button focused when even if clicked on input field

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>