The Select2 widget has no knowledge of other elements around it, so it cannot “push” them out of the way of it’s dropdown. But there are a few ways you might try to implement this feature yourself.
- You could try using the dropdownParent configuration property to attach the dropdown to an element that can push elements below it out of the way. I’m not positive this will work, though, because the Select2 dropdown will still be absolutely positioned, so when it opens the parent element might not expand to contain it. But you could try it.
- You could also try—along with the option above—using either the dropdownCss or dropdownCssClass configuration properties to change the dropdown from
position: absolute to position: relative, which should force the container element to expand to contain it.
- If neither of those solutions works, you can hook into one of the Select2 events (such as “select2:opening”) related to the dropdown opening and closing, and in the event handler move the elements below it out of the way. For this to work you would need to know how big (tall) the dropdown will be when open. You could determine this programmatically, or manually (by inspecting the open dropdown element in your browser’s Element Inspector).
Good luck!
