I seem to be facing an unexpected issue where the Bootstrap 5 Modal and other components are displaying inside the sidebar menu instead of the main content area.
Has anyone encountered this problem before? How can it be resolved?
Here is a test example:
<!doctype html>
<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e0ededf6f1f6f0e3f2c2b7acb2acb0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c5e5353484f484e5d4c7c09120c120e">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body id="body-pd" class="body-pd">
<div class="l-navbar show" id="nav-bar">
<nav class="nav">
<div> <a href="/" class="nav_logo"><span class="nav_logo-name">Test</span> </a>
<div class="nav_list">
<a href="#" class="nav_link"> <span class="nav_name">home</span> </a>
</div>
</div>
</nav>
</div>
<div class="content">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
<style>
:root {
--header-height: 3rem;
--nav-width: 68px;
--first-color: #979797;
--first-color-light: #3300FF;
--white-color: #F7F6FB;
--normal-font-size: 1rem;
--z-fixed: 100;
}
*,
::before,
::after {
box-sizing: border-box
}
body {
position: relative;
margin: var(--header-height) 0 0 0;
padding: 0 1rem;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: .5s;
}
.l-navbar {
position: fixed;
top: 0;
left: -30%;
width: var(--nav-width);
height: 100vh;
background-color: var(--first-color);
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: var(--z-fixed)
}
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden
}
.nav_logo,
.nav_link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 .5rem 1.5rem
}
.nav_logo-name {
color: var(--white-color);
font-weight: 700
}
.nav_link {
position: relative;
color: var(--first-color-light);
margin-bottom: 1.5rem;
transition: .3s
}
.nav_icon {
font-size: 1.25rem
}
.show {
left: 0
}
.body-pd {
padding-left: calc(var(--nav-width) + 1rem)
}
.active {
color: var(--white-color)
}
.active::before {
content: '';
position: absolute;
left: 0;
width: 2px;
height: 32px;
background-color: var(--white-color)
}
.height-100 {
height: 100vh
}
@media screen and (min-width: 768px) {
body {
margin: calc(var(--header-height) + 1rem) 0 0 0;
padding-left: calc(var(--nav-width) + 2rem)
}
.header {
height: calc(var(--header-height) + 0.2rem);
padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
}
.l-navbar {
left: 0;
padding: 1rem 1rem 0 0
}
.show {
width: calc(var(--nav-width) + 156px)
}
.body-pd {
padding-left: calc(var(--nav-width) + 170px)
}
}
</style>
</html>
Despite attempting various adjustments, the issue persists. There seems to be a missing piece of the puzzle that I am overlooking.