Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Select2 issue inside a scrollable Modal popup


Hello,

I am using a select2 control inside a Modal popup that sometimes are scrollable due to content size more than the screen height,

The dropdown menu of the select2 sometimes shows away from the select2 and sometimes it flickers and never shows, this behavior happens when a part of the popup is hidden due to its size, but when I zoom out so the whole popup is shown and centered to the screen the issue disappears.

I am using the data-dropdown-parent='@ModalPopup' tag but the issue is still occurring.

Thanks in advance.


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)


FESCO Bill Online
Check you Fesco Bill Online Free of cost!

Galvanized garden beds Transform your outdoor space into a thriving garden with Aosom's high-quality galvanized planter boxes. Designed to provide both practicality and style, these raised garden beds are the perfect addition to any yard or patio. Whether you're an experienced gardener or a beginner, our galvanized garden beds offer a durable solution for planting a variety of vegetables, flowers, and herbs

Hi,

We have been trying to fix this issue but so far we could not find a workaround.
Select2 itself does not work properly when the attached parent is scrollable so the issue lies in the plugin core implementation. We will update you if we have any news on this.

Regards.


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  :(