Keep select2 inside table column width #189

Author: chrisala

grails-app/assets/javascripts/forms-knockout-bindings.js

@@ -452,6 +452,29 @@
         }
     };
 
+    function forceSelect2ToRespectPercentageTableWidths(element) {
+        var parentColumn = $(element).parent('td') && $(element).parent('td')[0];
+        var resizeHandler = null;
+        if (parentColumn) {
+            var $parentColumn = $(parentColumn);
+            var select2 = $parentColumn.find('.select2-container');
+            select2.css('max-width', $parentColumn.width()+'px');
+
+            var debounce = null;
+            resizeHandler = function() {
+                clearTimeout(debounce);
+                setTimeout(function() {
+                    select2.css('max-width', $parentColumn.width()+'px');
+                }, 300);
+            };
+            $(window).on('resize', resizeHandler);
+
+            ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
+                $(window).off('resize', resizeHandler);
+            });
+        }
+
+    }
     function applySelect2ValidationCompatibility(element) {
         var $element = $(element);
         var select2 = $element.next('.select2-container');
@@ -573,6 +596,9 @@
                     $element.trigger('change');
                 });
             }
+            if (options.preserveColumnWidth) {
+                forceSelect2ToRespectPercentageTableWidths(element);
+            }
         }
     };
 
@@ -621,6 +647,10 @@
                 model($(element).val());
             });
 
+            if (options.preserveColumnWidth) {
+                forceSelect2ToRespectPercentageTableWidths(element);
+            }
+
             applySelect2ValidationCompatibility(element);
         },
         update: function(element, valueAccessor) {