Fixed #33024 -- Fixed height of admin selector boxes in collapsed fieldset.
Thanks Tom Carrick for the review.
This commit is contained in:
parent
b8c0b22f2f
commit
51c24d8799
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
},
|
||||
|
|
|
@ -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");
|
||||
|
|
|
@ -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().
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue