diff options
| -rw-r--r-- | django/contrib/admin/static/admin/css/widgets.css | 12 | ||||
| -rw-r--r-- | django/contrib/admin/static/admin/js/SelectFilter2.js | 18 | ||||
| -rw-r--r-- | js_tests/admin/SelectFilter2.test.js | 4 | ||||
| -rw-r--r-- | tests/admin_views/admin.py | 19 | ||||
| -rw-r--r-- | tests/admin_views/tests.py | 43 |
5 files changed, 71 insertions, 25 deletions
diff --git a/django/contrib/admin/static/admin/css/widgets.css b/django/contrib/admin/static/admin/css/widgets.css index c7d64566d9..7550604e18 100644 --- a/django/contrib/admin/static/admin/css/widgets.css +++ b/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 { diff --git a/django/contrib/admin/static/admin/js/SelectFilter2.js b/django/contrib/admin/static/admin/js/SelectFilter2.js index 6c709a08c2..194c2db2fe 100644 --- a/django/contrib/admin/static/admin/js/SelectFilter2.js +++ b/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); }, diff --git a/js_tests/admin/SelectFilter2.test.js b/js_tests/admin/SelectFilter2.test.js index a41d8f189d..f65965c4fb 100644 --- a/js_tests/admin/SelectFilter2.test.js +++ b/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"); diff --git a/tests/admin_views/admin.py b/tests/admin_views/admin.py index 3d276b2235..9cd078074b 100644 --- a/tests/admin_views/admin.py +++ b/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(). diff --git a/tests/admin_views/tests.py b/tests/admin_views/tests.py index 560d0e6134..2ea27f5312 100644 --- a/tests/admin_views/tests.py +++ b/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 |