On small screens and sometimes in computer screens with the right scroll, the dropdown menu of select 2 becomes very high on the screen not near the actual select input especially on mobile screens sometimes the menu will be at the top of the screen that I even can't see it
I am using metronic Bootstrap and HTML version v8.2.7
this happens not only in mobile but also In desktop view which I don't like. how can I deal with it thanks a lot for your help
Hi,
Unfortunately, this is how Select2 works. When the viewport height is small it change's its position. You can try to reduce the select2 height using the above code that I provided.
Regards,
Hi,
This is a known issue of Select2 when the screen height and viewport size is limited.
In this case, you can consider making the Select content smaller and scrollable for mobile mode referring to:
<pre>
<style>
@media only screen and (max-width: 768px) {
.select2-container--bootstrap5 .select2-dropdown .select2-results>.select2-results__options {
max-height: 200px !important;
}
}
</style>
Regards,
Sean