Multiple dropdown in same React component is not working - javascript

I have used two dropdown from mdbootstrap https://mdbootstrap.com/docs/jquery/components/dropdowns/
But both the dropdown has same dropdown items why so? In console -> source I am able to see different options but while displaying it is not shown why so? In below screenshots you can see dropdown items for both are same why is this happening? I am not able to debug this because in console -> source also it show shopping, travel etc but it is not displaying in dropdown why so?
code:
import React from "react";
import "./transaction.css";
const Transaction = () => {
return (
<div className="transactionContainer">
<h5 class="card-header info-color white-text text-center py-4">
<strong>Transaction Information</strong>
</h5>
<div class="card">
<div class="card-body px-lg-5 pt-0">
<form class="text-center" style={{ color: "#757575" }} action="#!">
<div class="md-form">
<input type="text" id="amount" class="form-control" />
<label for="amount">Amount</label>
</div>
<button
class="btn btn-primary dropdown-toggle mr-4"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Payment Method
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
Cash
</a>
<a class="dropdown-item" href="#">
Debit/Credit Card
</a>
<a class="dropdown-item" href="#">
Net Banking
</a>
</div>
<button
class="btn btn-primary dropdown-toggle mr-4"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Category
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
Shopping
</a>
<a class="dropdown-item" href="#">
Travel
</a>
<a class="dropdown-item" href="#">
Entertainment
</a>
</div>
<button
class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0"
type="submit"
>
Add transaction
</button>
</form>
</div>
</div>
</div>
);
};
export default Transaction;
Screenshots:

Each dropdown needs to be wrapped inside a div with class of dropdown like this:
<div className="dropdown">
<button
class="btn btn-primary dropdown-toggle mr-4"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Payment Method
</button>
<div id="menu1" class="dropdown-menu">
<a class="dropdown-item" href="#">
Cash
</a>
<a class="dropdown-item" href="#">
Debit/Credit Card
</a>
<a class="dropdown-item" href="#">
Net Banking
</a>
</div>
</div>

Related

Stop auto-close dropdown menu after click on a link

i have dropdown menu from bootstrap 4.In adaptive small screen, I have hamburger, there has title dropdown its opens another one dropdown.So, when I open title dropdown to see what inside, dropdown automatically close full dropdown. Here`s code
<nav class="navbar navbar-expand-lg navbar-header">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="./" rel="tooltip" title="Казахстанский инженерно-технологический университет" data-placement="bottom">
<img src="assets/img/logo_new.png" width="180">
</a>
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<div class="collapse navbar-collapse" style="background-color: white;" id="navigation">
<ul class="navbar-nav mr-auto" id="testing">
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle myclass" data-toggle="dropdown" href="#" id="dropdownMenuButton" role="button" aria-haspopup="true" aria-expanded="false"><?=$m_admission[$_SESSION['lang']]?></a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="?page=undergraduate"> <?=$b_undergraduate[$_SESSION['lang']]?> </a>
<a class="dropdown-item" href="?page=graduate"> <?=$b_graduate[$_SESSION['lang']]?> </a>
<a class="dropdown-item" href="https://kazetu.edu.kz/sites/dl/" target="_blank"> <?=$b_distance_learning[$_SESSION['lang']]?> </a>
<a class="dropdown-item" href="https://college.kazetu.edu.kz/"> <?=$b_college[$_SESSION['lang']]?> </a>
<a class="dropdown-item" href="https://zerde.kazetu.kz/?lang=ru" target="_blank"> <?=$zerde_kazetu_reg[$_SESSION['lang']]?> </a>
</ul>
</div>
</ul>
</div>
</div>
</nav>
</header>
I dont fount answer for my question, so, i just write it without bootstrap on clear html and css xD

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.

How to make side by side drop down menus with bootstrap?

I am trying to a birthday input for my form which will contain three dropdown menus. The first one will have day, then month, and then year.
<div class="dropdown" style="position:inline-block">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
That is the code for one dropdown menu from the bootstrap website.
Have a look on below code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-lg-4 col-sm-4 col-xs-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-xs-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-xs-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
</div>
may it helps you.
You can use btn-group class to make your button menu side by side.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

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.

How do I create Multiple bootstrap dropdown menus per page that don't interact with each other?

In the following code I use the first bootstrap dropdown to list a selection of items to show. Selecting one creates a bootstrap nav bar with two input fields, a check in field, another dropdown button and two additional buttons. I've put it together like you see in the below example.
The problem is the selection I make in the first dropdown appears in the second dropdown as the title, and that dropdown does not work to give the additional options.
I can't seem to find a way to keep the two dropdown button items from clashing, how can I make them independent of each other?
<div id="container">
<div id="select1" class="dropdown">
<button id="dpbutton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Select an Existing Net
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation">
Show All Stations in DB</li>
<li class="divider"></li>
<li role='presentation' class=' bg-success ' data-value="13"'>
<a href='#' role='menuitem' onclick = 'showActivities(13)'>
Item1
</a>
</li>
<li role='presentation' class=' bg-success ' data-value="12"'>
<a href='#' role='menuitem' onclick = 'showActivities(12)'>
Item2
</a>
</li>
</ul>
</div>
</div>
<nav id="admin" class=" hidden navbar navbar-inverse admin flashit roundit" role="navigation">
<div class=" container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
</div>
<form class="navbar-form navbar-left">
<div class="form-group">
<input id="cs1" type="text" class="form-control" placeholder="Call Sign" tabindex=1 onkeyup="showHint(this.value);" maxlength="16" onmousedown="isKeyPressed(event)" autofocus />
<input id="Fname" type="text" class="form-control" placeholder="First Name" tabindex=2 onkeyup="nameHint(this.value);" onblur="checkIn();" />
</div>
</form>
<button id="ckin2" type="submit" class="btn btn-success" tabindex=3 >Check In</button>
<div class="btn-group">
<button id="showops" type="button" class="btn btn-secondary btn-sm dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Show/Hide
<span class="caret"></span>
</button>
<div class="dropdown-menu" role="menu" aria-labelledby="menu1">
<a role="menuitem" class="dropdown-item" href="#">Show Grid</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show eMail</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show Lat/Lon</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show Last Name</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show TOD</a>
</div>
</div>
<button id="time" class=" btn btn-info navbar-btn " type="button" onClick="TimeLine();" >Time Line</button>
<button id="closelog" class=" btn btn-danger navbar-btn closenet " type="button" value="Close Net" oncontextmenu="rightclickundotimeout();return false;">Close Net</button>
</div> <!-- end container fluid -->
</nav>
<ul id="txtHint"></ul>
<div id="netids"></div>
<br><br><br>
<div id="actLog" class="hidden">net goes here</div>

Categories