Hide #sort section instead of covering it

Before, the .form-actions was overlaying it, to avoid making the table below jump. But if the .form-actions and #sort are the same height, it won't jump when we swap them.

It does make the table jump in the case of a multi-line .form-actions message, but that only happens after submit anyway.

This is needed for the next commit..
This commit is contained in:
David Cook
2024-01-09 13:11:49 +11:00
parent 2defc4afa7
commit e48d009668

View File

@@ -22,8 +22,8 @@
// Form actions floats over other controls when active
#products-form {
.form-actions {
position: absolute;
top: -1em;
// position: absolute;
// top: -1;
left: 0;
right: 0;
z-index: 1; // Ensure tom-select and .disabled-section are covered
@@ -174,7 +174,8 @@
}
#sort {
margin-bottom: 1em;
margin-top: 3px; // Helps even up with .form-actions when visible
margin-bottom: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
@@ -184,6 +185,10 @@
line-height: $btn-relaxed-height;
height: $btn-relaxed-height;
&.disabled-section {
display: none;
}
.with-dropdown {
display: flex;
justify-content: space-between;
@@ -198,7 +203,7 @@
grid-template-rows: 1fr;
grid-column-gap: 20px;
align-items: end;
margin-bottom: 20px;
margin-bottom: 1rem;
.query {
grid-column: 1 / span 3;