Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

I have a problem with select 2


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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


I have found a solution for this problem for any one had the same one:
we in general do that:
<select class="form-select form-select-solid select2-input select2-country" name="nationality" required data-dropdown-parent="#modal_id">
<option></option>
</select>
* we put modal id in the data-dropdown-parent which make the problem to solve it pick a near div usually the one that hold the select element let's say for example that the div holding it called try to make the id as near as possible to the select tag and instead of adding to data-dropdown-parent the id of the modal add the id of main_form_inputs like that:
<select class="form-select form-select-solid select2-input select2-country" name="nationality" required data-dropdown-parent="#main_form_inputs ">
<option></option>
</select>

I have this way more precise in making the select2 search and dropdown be near the actual select tag and I have tested it with different devices, sizes and situation and it works perfectly



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 happy



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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(