For my university project, I am developing a website that resembles a text editor using Bootstrap as the framework. To create the website menus, dynamic tabs have been utilized. The following is the code snippet I have implemented:
<!--Bootstrap styling import-->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343362d302d30">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!--Creation of the dynamic tabs-->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link px-4" id="file-tab" data-bs-toggle="tab" data-bs-target="#file-tab-pane" type="button" role="tab" aria-controls="file-tab-pane" aria-selected="false">File</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active px-4" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link px-4" id="edit-tab" data-bs-toggle="tab" data-bs-target="#edit-tab-pane" type="button" role="tab" aria-controls="edit-tab-pane" aria-selected="false">Edit</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link px-4" id="layout-tab" data-bs-toggle="tab" data-bs-target="#layout-tab-pane" type="button" role="tab" aria-controls="layout-tab-pane" aria-selected="false">Layout</button>
</li>
</ul>
<div class="tab-content border border-1" id="myTabContent">
<!--Content in the file tab-->
<div class="tab-pane fade" id="file-tab-pane" role="tabpanel" aria-labelledby="file-tab" tabindex="0">...</div>
<!--Content in the home tab-->
<div class="tab-pane fade show active d-flex justify-content-center my-2" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
<div class="d-flex align-items-center overflow-auto gap-1">
<button type="button" class="btn" id="boldButton" data-bs-toggle="button"><b>B</b></button>
<button type="button" class="btn" id="italicsButton" data-bs-toggle="button"><i>I</i></button>
<button type="button" class="btn" id="underlineButton" data-bs-toggle="button"><u>U</u></button>
<select class="ms-5" name="font" id="font">
<option value="times-new-roman">Times New Roman</option>
<option value="helvetica">Helvetica</option>
<option value="garamond">Garamond</option>
<option value="calibri">Calibri</option>
<option value="arial">Arial</option>
</select>
<button type="button" class="btn" id="increaseFontSize">Size△</button>
<button type="button" class="btn me-5" id="decreaseFontSize">Size▽</button>
<button type="button" class="btn" data-bs-toggle="button">Left Align</button>
<button type="button" class="btn" data-bs-toggle="button">Centre Align</button>
<button type="button" class="btn" data-bs-toggle="button">Right Align</button>
<button type="button" class="btn" data-bs-toggle="button">Justify</button>
<select name="spacing" id="spacing">
<option value="" disabled selected>Line Spacing</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="1.5">1.5 (Default)</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
</select>
<button type="button" class="btn ms-5">Bulleted List</button>
<button type="button" class="btn">Numbered List</button>
</div>
</div>
<!--Content in the edit tab-->
<div class="tab-pane fade d-flex justify-content-center my-2" id="edit-tab-pane" role="tabpanel" aria-labelledby="edit-tab" tabindex="0">
<div class="d-flex align-items-center overflow-auto gap-1">
<button type="button" class="btn">Undo</button>
</div>
</div>
<!--Content in the layout tab-->
<div class="tab-pane fade" id="layout-tab-pane" role="tabpanel" aria-labelledby="layout-tab" tabindex="0">...</div>
</div>
<div class="text-area d-flex justify-content-center my-5">
<div id="input" contenteditable="true"></div>
</div>
<!--Bootstrap js import-->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b3934342f282f293a2b1b6e75687568">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>Upon inspecting the webpage, I noticed an issue where switching from the home to the edit tab results in buttons within the edit tab stacking below within the div. It seems like the buttons from the home tab are still present but invisible. Adding more buttons within another tab further compounds this issue, causing overlapping. Here is a visual representation of the problem:
https://i.stack.imgur.com/3IKda.png
I have attempted various solutions such as removing custom stylesheets and JS code, converting list elements to divs, changing button types to links within their respective div elements, but none have resolved the problem.