Here In the code I'm using Bootstrap Material Design and Bootstrap CDN both. while in Drawer If I try to open the category dropdown menu means it's just flashing. I tries to do it other sides also. like within container. But there also same flashing error.
I copied from Bootstrap official site as well as from Material bootstrap also both also I tried but the "Categories dropdown menu is showing the same"
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap-material-design.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<style>
</style>
<title>aabbaaaa</title>
</head>
<body>
<div>
<div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay" id="d1">
<header class="bmd-layout-header">
<div class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s2">
<span class="sr-only">Toggle drawer</span>
<i class="material-icons">menu</i>
</button>
<a href="index.html" class="navbar-brand" style="padding-right: 30%;">aabbaaaa</a>
<i class="far fa-user-circle" style="padding:0;"></i></i>
<i class="fas fa-shopping-cart"><sup><span class="badge badge-info">0</span></sup></i>
</div>
</header>
<div id="dw-s2" class="bmd-layout-drawer bg-faded">
<header style="display: inline-block;">
<a href="index.html" style="text-decoration: none;"><i class="fas fa-home"></i>Home</a>
<a class="navbar-brand" href="index.html" style="padding-left: 50%;;"><img src="img/logo.png" class="img-fluid" style="height: 25px;width: 25px;"></a>
</header>
<ul class="list-group">
<li class="list-group-item">
<div class="dropdown show">
<a class="dropdown-toggle text-dark" href="#" role="link" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Categories
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<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>
</li>
<li class="list-group-item">Product</li>
<li class="list-group-item">Shopping Cart</li>
<li class="list-group-item">Checkout</li>
<li class="list-group-item">My Order</li>
<li class="list-group-item">My wishlist</li>
<li class="list-group-item">My account</li>
<li class="list-group-item">My notifications</li>
<li class="list-group-item">Help Center</li>
</ul>
</div>
<main class="bmd-layout-content">
<div class="bmd-form-group bmd-collapse-inline pull-xs-right">
<button class="btn bmd-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search" aria-expanded="false" aria-controls="collapse-search">
<i class="material-icons">search</i>
</button>
<span id="collapse-search" class="collapse">
<input class="form-control" type="text" id="search" placeholder="Enter your query...">
</span>
</div>
<div class="container">
<p>Main content</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis velit consequuntur error! Rem fugiat, quibusdam dolorum laborum quo reprehenderit non? Blanditiis dolorum rem nisi, quidem delectus explicabo aliquid ipsum sequi?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis velit consequuntur error! Rem fugiat, quibusdam dolorum laborum quo reprehenderit non? Blanditiis dolorum rem nisi, quidem delectus explicabo aliquid ipsum sequi?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis velit consequuntur error! Rem fugiat, quibusdam dolorum laborum quo reprehenderit non? Blanditiis dolorum rem nisi, quidem delectus explicabo aliquid ipsum sequi?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis velit consequuntur error! Rem fugiat, quibusdam dolorum laborum quo reprehenderit non? Blanditiis dolorum rem nisi, quidem delectus explicabo aliquid ipsum sequi?</p>
</div>
</main>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/umd/popper.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap-material-design.js"></script>
<script>
$(document).ready(function() {
$('body').bootstrapMaterialDesign();
});
</script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="https://kit.fontawesome.com/596df9a01c.js" crossorigin="anonymous"></script>
</body>
</html>you just add code comments for bootstrap 4 CDNs after commenting that all thing are works fine. you can check it in below snippet.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap-material-design.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> -->
<style>
</style>
<title>aabbaaaa</title>
</head>
<body>
<div>
<div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay" id="d1">
<header class="bmd-layout-header">
<div class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s2">
<span class="sr-only">Toggle drawer</span>
<i class="material-icons">menu</i>
</button>
<a href="index.html" class="navbar-brand" style="padding-right: 30%;">aabbaaaa</a>
<i class="far fa-user-circle" style="padding:0;"></i></i>
<i class="fas fa-shopping-cart"><sup><span class="badge badge-info">0</span></sup></i>
</div>
</header>
<div id="dw-s2" class="bmd-layout-drawer bg-faded">
<header style="display: inline-block;">
<a href="index.html" style="text-decoration: none;"><i class="fas fa-home"></i>Home</a>
<a class="navbar-brand" href="index.html" style="padding-left: 50%;;"><img src="img/logo.png" class="img-fluid" style="height: 25px;width: 25px;"></a>
</header>
<ul class="list-group">
<li class="list-group-item">
<div class="dropdown show">
<a class="dropdown-toggle text-dark" href="#" role="link" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Categories
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<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>
</li>
<li class="list-group-item">Product</li>
<li class="list-group-item">Shopping Cart</li>
<li class="list-group-item">Checkout</li>
<li class="list-group-item">My Order</li>
<li class="list-group-item">My wishlist</li>
<li class="list-group-item">My account</li>
<li class="list-group-item">My notifications</li>
<li class="list-group-item">Help Center</li>
</ul>
</div>
<main class="bmd-layout-content">
<div class="bmd-form-group bmd-collapse-inline pull-xs-right">
<button class="btn bmd-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search" aria-expanded="false" aria-controls="collapse-search">
<i class="material-icons">search</i>
</button>
<span id="collapse-search" class="collapse">
<input class="form-control" type="text" id="search" placeholder="Enter your query...">
</span>
</div>
<div class="container">
<p>Main content</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis velit consequuntur error! Rem fugiat, quibusdam dolorum laborum quo reprehenderit non? Blanditiis dolorum rem nisi, quidem delectus explicabo aliquid ipsum sequi?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis velit consequuntur error! Rem fugiat, quibusdam dolorum laborum quo reprehenderit non? Blanditiis dolorum rem nisi, quidem delectus explicabo aliquid ipsum sequi?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis velit consequuntur error! Rem fugiat, quibusdam dolorum laborum quo reprehenderit non? Blanditiis dolorum rem nisi, quidem delectus explicabo aliquid ipsum sequi?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis velit consequuntur error! Rem fugiat, quibusdam dolorum laborum quo reprehenderit non? Blanditiis dolorum rem nisi, quidem delectus explicabo aliquid ipsum sequi?</p>
</div>
</main>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> -->
<!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> -->
<!-- <script src="https://unpkg.com/[email protected]/dist/umd/popper.js"></script> -->
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap-material-design.js"></script>
<script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="https://kit.fontawesome.com/596df9a01c.js" crossorigin="anonymous"></script>
</body>
</html>Note: MDB(Material Design Bootstrap) and BS4 (Bootstrap 4) both are use same grid structures. But in MDB some additional functionalities are added so you can use MDB only. no need to use BS4 with MDB because that make some code conflicting for the click events and like burger menu and drop-down menu etc.
I hope this works fine for you.
Thank You...