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

Thanks Tom Carrick for the review.
This commit is contained in:
Shubh1815 2021-11-15 19:57:11 +05:30 committed by Mariusz Felisiak
parent b8c0b22f2f
commit 51c24d8799
5 changed files with 71 additions and 25 deletions

View File

@ -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 {

View File

@ -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);
},

View File

@ -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");

View File

@ -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().

View File

@ -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