Fix: in IE11, the resize detector was blocking content

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -15,6 +15,7 @@
     overflow: hidden;
     pointer-events: none;
     z-index: -1;
+    visibility: hidden;
 }
 
 .xblock--drag-and-drop .initial-load-spinner {

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -648,6 +648,7 @@ function DragAndDropTemplates(configuration) {
         // image to 100%, so that it doesn't expand the container.
         if (ctx.drag_container_max_width === null) {
             target_img_style.maxWidth = '100%';
+            item_bank_properties.style = {display: 'none'};
         } else {
             drag_container_style.maxWidth = ctx.drag_container_max_width + 'px';
         }

tests/integration/test_sizing.py

@@ -178,6 +178,9 @@ class SizingTests(InteractionTestBase, BaseIntegrationTest):
         self.browser.execute_script('$(".wrapper-workbench").css("margin-right", "-{}px")'.format(40 + scrollbar_width))
         # And reduce the wasted space around our XBlock in the workbench:
         self.browser.execute_script('return $(".workbench .preview").css("margin", "0")')
+        # Dynamically adjusting styles causes available screen width to change, but does not always emit
+        # resize events consistently, so emit resize manually to make sure the block adapts to the new size.
+        self.browser.execute_script('$(window).resize()')
 
     def _check_mobile_container_size(self):
         """ Verify that the drag-container tightly fits into the available space. """