Fixed #33024 -- Fixed height of admin selector boxes in collapsed fieldset.

Thanks Tom Carrick for the review.

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

@@ -3,18 +3,21 @@
 .selector {
     width: 800px;
     float: left;
+    display: flex;
 }
 
 .selector select {
     width: 380px;
     height: 17.2em;
+    flex: 1 0 auto;
 }
 
 .selector-available, .selector-chosen {
-    float: left;
     width: 380px;
     text-align: center;
     margin-bottom: 5px;
+    display: flex;
+    flex-direction: column;
 }
 
 .selector-chosen select {
@@ -63,12 +66,13 @@
 }
 
 .selector ul.selector-chooser {
-    float: left;
+    align-self: center;
     width: 22px;
     background-color: var(--selected-bg);
     border-radius: 10px;
-    margin: 10em 5px 0 5px;
+    margin: 0 5px;
     padding: 0;
+    transform: translateY(-17px);
 }
 
 .selector-chooser li {
@@ -168,6 +172,7 @@ a.active.selector-clearall:focus, a.active.selector-clearall:hover {
 .stacked {
     float: left;
     width: 490px;
+    display: block;
 }
 
 .stacked select {
@@ -193,6 +198,7 @@ a.active.selector-clearall:focus, a.active.selector-clearall:hover {
     margin: 0 0 10px 40%;
     background-color: #eee;
     border-radius: 10px;
+    transform: none;
 }
 
 .stacked .selector-chooser li {

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

@@ -153,24 +153,6 @@ Requires core.js and SelectBox.js.
             // 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.
-                const j_from_box = document.getElementById(field_id + '_from');
-                const j_to_box = document.getElementById(field_id + '_to');
-                let 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);
         },

js_tests/admin/SelectFilter2.test.js

@@ -10,10 +10,6 @@ QUnit.test('init', function(assert) {
     SelectFilter.init('id', 'things', 0);
     assert.equal($('.selector-available h2').text().trim(), "Available things");
     assert.equal($('.selector-chosen h2').text().trim(), "Chosen things");
-    assert.equal(
-        $('.selector-available select').outerHeight() + $('.selector-filter').outerHeight(),
-        $('.selector-chosen select').height()
-    );
     assert.equal($('.selector-chosen select')[0].getAttribute('multiple'), '');
     assert.equal($('.selector-chooseall').text(), "Choose all");
     assert.equal($('.selector-add').text(), "Choose");

tests/admin_views/admin.py

@@ -1164,6 +1164,25 @@ site7 = admin.AdminSite(name="admin7")
 site7.register(Article, ArticleAdmin2)
 site7.register(Section)
 site7.register(PrePopulatedPost, PrePopulatedPostReadOnlyAdmin)
+site7.register(
+    Pizza,
+    filter_horizontal=['toppings'],
+    fieldsets=(
+        ('Collapsible', {
+            'classes': ['collapse'],
+            'fields': ['toppings'],
+        }),
+    ),
+)
+site7.register(
+    Question,
+    filter_horizontal=['related_questions'],
+    fieldsets=(
+        ('Not collapsible', {
+            'fields': ['related_questions'],
+        }),
+    ),
+)
 
 
 # Used to test ModelAdmin.sortable_by and get_sortable_by().

tests/admin_views/tests.py

@@ -4810,6 +4810,49 @@ class SeleniumTests(AdminSeleniumTestCase):
         self.assertTrue(self.selenium.find_element(By.ID, 'id_title').is_displayed())
         self.assertEqual(self.selenium.find_element(By.ID, 'fieldsetcollapser0').text, "Hide")
 
+    def test_selectbox_height_collapsible_fieldset(self):
+        from selenium.webdriver.common.by import By
+
+        self.admin_login(
+            username='super',
+            password='secret',
+            login_url=reverse('admin7:index'),
+        )
+        url = self.live_server_url + reverse('admin7:admin_views_pizza_add')
+        self.selenium.get(url)
+        self.selenium.find_elements(By.LINK_TEXT, 'Show')[0].click()
+        filter_box = self.selenium.find_element(By.ID, 'id_toppings_filter')
+        from_box = self.selenium.find_element(By.ID, 'id_toppings_from')
+        to_box = self.selenium.find_element(By.ID, 'id_toppings_to')
+        self.assertEqual(
+            to_box.get_property('offsetHeight'),
+            (
+                filter_box.get_property('offsetHeight') +
+                from_box.get_property('offsetHeight')
+            ),
+        )
+
+    def test_selectbox_height_not_collapsible_fieldset(self):
+        from selenium.webdriver.common.by import By
+
+        self.admin_login(
+            username='super',
+            password='secret',
+            login_url=reverse('admin7:index'),
+        )
+        url = self.live_server_url + reverse('admin7:admin_views_question_add')
+        self.selenium.get(url)
+        filter_box = self.selenium.find_element(By.ID, 'id_related_questions_filter')
+        from_box = self.selenium.find_element(By.ID, 'id_related_questions_from')
+        to_box = self.selenium.find_element(By.ID, 'id_related_questions_to')
+        self.assertEqual(
+            to_box.get_property('offsetHeight'),
+            (
+                filter_box.get_property('offsetHeight') +
+                from_box.get_property('offsetHeight')
+            ),
+        )
+
     def test_first_field_focus(self):
         """JavaScript-assisted auto-focus on first usable form field."""
         from selenium.webdriver.common.by import By