Ticket #33024: ticket_33024.diff

django/contrib/admin/static/admin/css/widgets.css

@@ -1 +1 @@
 /* SELECTOR (FILTER INTERFACE) */
 
 .selector {
+    display: flex;
     width: 800px;
     float: left;
 }
@@ -8 +9 @@
 .selector select {
     width: 380px;
     height: 17.2em;
+    flex: 1 0 auto;
 }
 
 .selector-available, .selector-chosen {
@@ -15 +17 @@
     width: 380px;
     text-align: center;
     margin-bottom: 5px;
+    display: flex;
+    flex-direction: column;
 }
 
 .selector-chosen select {
@@ -63 +67 @@
 }
 
 .selector ul.selector-chooser {
+    align-self: center;
     float: left;
     width: 22px;
     background-color: var(--selected-bg);
     border-radius: 10px;
-    margin: 10em 5px 0 5px;
+    margin: 0 5px;
     padding: 0;
 }
 

django/contrib/admin/static/admin/js/SelectFilter2.js

@@ -153 +153 @@
             // Move selected from_box options to to_box
             SelectBox.move(field_id + '_from', field_id + '_to');
 
-            if (!is_stacked) {
-                // In horizontal mode, give the same height to the two boxes.
-                let height;
-                const j_from_box = document.getElementById(field_id + '_from');
-                const j_to_box = document.getElementById(field_id + '_to');
-                const collapsed_fieldsets = Array.from(document.querySelectorAll('fieldset.collapsed'));
-
-                const is_selectbox_collapsed = collapsed_fieldsets.some(function(collapsed_fieldset) {
-                    // Collapsed fieldset contains the selectbox
-                    if (collapsed_fieldset.querySelector('.field-' + field_name) !== null) {
-                        collapsed_fieldset.classList.remove('collapsed');
-                        height = filter_p.offsetHeight + j_from_box.offsetHeight;
-                        collapsed_fieldset.classList.add('collapsed');
-                        return true;
-                    }
-                    return false;
-                });
-
-                if (!is_selectbox_collapsed) {
-                    height = filter_p.offsetHeight + j_from_box.offsetHeight;
-                }
-
-                const j_to_box_style = window.getComputedStyle(j_to_box);
-                if (j_to_box_style.getPropertyValue('box-sizing') === 'border-box') {
-                    // Add the padding and border to the final height.
-                    height += parseInt(j_to_box_style.getPropertyValue('padding-top'), 10)
-                        + parseInt(j_to_box_style.getPropertyValue('padding-bottom'), 10)
-                        + parseInt(j_to_box_style.getPropertyValue('border-top-width'), 10)
-                        + parseInt(j_to_box_style.getPropertyValue('border-bottom-width'), 10);
-                }
-
-                j_to_box.style.height = height + 'px';
-            }
-
             // Initial icon refresh
             SelectFilter.refresh_icons(field_id);
         },