Incorporating Bootstrap's modal to showcase a dropdown menu containing an extensive list of countries, I encountered a problem where the menu extended beyond the window size. It is important to note that this issue arose while developing a browser extension.
https://i.sstatic.net/XP324.png
My Vue.js code snippet looks like this:
<template>
<div class="modal fade" id="chooseCountry">
<div class="absolute justify-content-center modal-dialog-centered modal-sm">
<div class="modal-content">
<div class="container">
<div class="mb-2">How can I avoid this issue?</div>
<v-select label="name" :options="countries"></v-select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
</template>
...this is a standard Bootstrap template with vSelect incorporated (a select/dropdown component). Despite my attempt to add overflow-y: hidden; to #chooseCountry, the outer scrollbar would still cause a visible left gap each time the dropdown was accessed by clicking on the arrow.
https://i.sstatic.net/mzuRQ.png
The modal inherits its width from the parent and the issue arises with the appearance of the outer scrollbar. The width adjusts to accommodate the right-side scrollbar (as seen in the first image), consequently creating a white space on the left side to match the gap. Even when the scrollbar is not visible, the excess space remains on the left-hand side (as shown in the second image)...
Is there a way to maintain the modal's original width without adjusting to the scrollbar? Alternatively, integrating another dropdown list with a search input field might serve as a solution. While vSelect was a convenient pre-built option for me, I am open to removing it if it resolves the issue :-).
Any assistance provided will be greatly appreciated. Apologies in advance if a similar inquiry has been addressed before, but my search did not yield any helpful results specifically tailored to my browser extension project...
If there are relevant code snippets that I may have overlooked, please do let me know so I can furnish them promptly.