I have a dropdown feature on my bootstrap second textbox with a lot of content. The issue is that the dropdown overflows and leaks into the textbox located on the left below it. How can I resize it properly to fit within the confines of the drooping textbox?
UPDATE:
In the image below, you can see a RED area indicated. This is where I need the dropdown to be confined to:
https://i.sstatic.net/DPnoo.png
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbfb2b2a9aea9afbcad9de8f3eff3ee">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<style>
.dropdown .list-group-item {
width: 100px!important;
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1d3dedec5c2c5c3d0c1f1849f839f82">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7L+jL+jjXkk+Q2h455rYXK/7HAuoJ+I4" crossorigin="anonymous"></script>
<div class="input-group">
<button type="button" role="button" title="Delete" class="material-symbols-outlined text-secondary input-group-text bg-theme delrow">delete</button>
<input type="text" placeholder="Key" class="form-control key">
<input type="text" placeholder="Value" class="form-control form-select value suggest coltitle-tags meta-tags typeable dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
<div class="dropdown-menu border-secondary fdropdown-menu show" data-popper-placement="bottom-start" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(16.8px, 38.4px, 0px);">
<div>
<input type="search" placeholder="Type to search..." class="m-3 mt-2 form-control search"> <span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Timestamp}}" title="Timestamp
" href="#">Timestamp</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Email Address}}" title="Email Address
ⓘ Column B" href="#">Email Address</a></span>...
<li>
<hr class="dropdown-divider">
</li>
<span class="dropdown-tag-meta"><a class="dropdown-tag-meta-item" data-value="{{Response Number}}" title="Response Number
ⓘ Form Response number" href="#"> Response Number </a></span><span class="dropdown-tag-meta"><a class="dropdown-tag-meta-item" data-value="{{Form Name}}" title="Form Name
ⓘ The name of the Google Form" href="#"> Form Name </a></span>...
</div>
</div>
<button type="button" role="button" title="Add new" class="material-symbols-outlined input-group-text bg-theme addrow">add</button>
</div>
<script>
$(document).ready(function() {
$(`body`).on("click", '.addrow,.addnewrow', function() {
$(this).parent().after(`<div class="input-group">
<button type="button" role="button" title="Delete" class="material-symbols-outlined input-group-text bg-theme delnewrow">delete</button>
<input type="text" placeholder="Key" class="form-control key">
<input type="text" placeholder="Value" class="form-control form-select value suggest coltitle-tags meta-tags typeable dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" data-bs-auto-close="outside" aria-expanded="false">
<button type="button" role="button" title="Add new" class="material-symbols-outlined input-group-text bg-theme addnewrow">add</button>
</div>`);
addsuggest(wid, tid);
}).on("click", '.delnewrow', function() {
$(this).parent().remove();
});
});
</script>
</body>
</html>