Fixes #6999: Properly align controls on sm and md breakpoints

This commit is contained in:
Matt 2021-08-20 08:57:10 -07:00
parent 517c0e2fe6
commit a7cb75d73d
5 changed files with 19 additions and 8 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -288,7 +288,7 @@ div.title-container {
justify-content: flex-start;
// Right-align controls on larger screens.
@include media-breakpoint-up(md) {
@include media-breakpoint-up(lg) {
justify-content: flex-end;
}
@ -872,11 +872,22 @@ div.card-overlay {
}
}
div.card > div.card-header > div.table-controls {
.table-controls {
display: flex;
align-items: center;
width: 100%;
max-width: 25%;
@include media-breakpoint-up(md) {
// `!important` needed because of inherited margin-bottom from `.col`
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.table-configure {
justify-content: flex-start;
@include media-breakpoint-up(md) {
justify-content: flex-end;
}
}
.form-switch.form-check-inline {
flex: 1 0 auto;

View File

@ -1,5 +1,5 @@
<div class="row mb-3 justify-content-between">
<div class="col col-12 col-lg-4 my-3 my-lg-0 d-flex noprint table-controls">
<div class="table-controls noprint col col-12 col-md-8 col-lg-4">
<div class="input-group input-group-sm">
<input
type="text"
@ -9,9 +9,9 @@
/>
</div>
</div>
<div class="col col-md-3 mb-0 d-flex noprint table-controls">
<div class="table-controls noprint col col-md-3 mb-0">
{% if request.user.is_authenticated and table_modal %}
<div class="input-group input-group-sm justify-content-end">
<div class="table-configure input-group input-group-sm">
<button
type="button"
data-bs-toggle="modal"