Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • 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



Galvanized garden beds



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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(