corbz/PYRSS-Website
corbz/PYRSS-Website
1
0
Fork 0
Code Issues 21 Pull Requests Actions Releases 1 Wiki Activity

remove select2 dependence on 'dropdownParent'
All checks were successful
Build and Push Docker Image / build (push) Successful in 14s
Details

Browse Source 
fixes an issue with dropdown options placement on smaller screens in modals.

Instead of 'dropdownParent', just set the z-index of the dropdown options to 9999 - above the modal.
This commit is contained in:
Corban-Lee Jones 2024-10-12 21:06:52 +01:00
parent a3279a4c91
commit 180a646267
5 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/home/templates/home/modals/editFilter.html
View File

@ -22,7 +22,7 @@
<div class="col-12"> <div class="col-12">
<div class="mb-4"> <div class="mb-4">
<label for="filterMatchingAlgorithm" class="form-label">Matching Algorithm</label> <label for="filterMatchingAlgorithm" class="form-label">Matching Algorithm</label>
<select name="filterMatchingAlgorithm" id="filterMatchingAlgorithm" class="select-2" data-dropdownparent="#filterFormModal" data-field="matching_algorithm" tabindex="2"></select> <select name="filterMatchingAlgorithm" id="filterMatchingAlgorithm" class="select-2" data-field="matching_algorithm" tabindex="2"></select>
<div class="form-text">The algorithm used to match against.</div> <div class="form-text">The algorithm used to match against.</div>
</div> </div>
</div> </div>

4
apps/home/templates/home/modals/editStyle.html
View File

@ -74,7 +74,7 @@
<div class="col-lg-6 pe-lg-4"> <div class="col-lg-6 pe-lg-4">
<div class="mb-4 mb-lg-0"> <div class="mb-4 mb-lg-0">
<label for="styleTitleMutator" class="form-label">Title Mutator</label> <label for="styleTitleMutator" class="form-label">Title Mutator</label>
<select name="styleTitleMutator" id="styleTitleMutator" class="select-2" data-dropdownparent="#styleFormModal" data-field="title_mutator" tabindex="8"> <select name="styleTitleMutator" id="styleTitleMutator" class="select-2" data-field="title_mutator" tabindex="8">
<option value="">-----</option> <option value="">-----</option>
</select> </select>
<div class="form-text">Modify the title in fun ways.</div> <div class="form-text">Modify the title in fun ways.</div>
@ -83,7 +83,7 @@
<div class="col-lg-6 ps-lg-4"> <div class="col-lg-6 ps-lg-4">
<div class=""> <div class="">
<label for="styleDescriptionMutator" class="form-label">Description Mutator</label> <label for="styleDescriptionMutator" class="form-label">Description Mutator</label>
<select name="styleDescriptionMutator" id="styleDescriptionMutator" class="select-2" data-dropdownparent="#styleFormModal" data-field="description_mutator" tabindex="9"> <select name="styleDescriptionMutator" id="styleDescriptionMutator" class="select-2" data-field="description_mutator" tabindex="9">
<option value="">-----</option> <option value="">-----</option>
</select> </select>
<div class="form-text">Modify the description in fun ways.</div> <div class="form-text">Modify the description in fun ways.</div>

8
apps/home/templates/home/modals/editSub.html
View File

@ -29,7 +29,7 @@
<div class="col-lg-6 pe-lg-4"> <div class="col-lg-6 pe-lg-4">
<div class="mb-4"> <div class="mb-4">
<label for="subMessageStyle" class="form-label">Message Style</label> <label for="subMessageStyle" class="form-label">Message Style</label>
<select name="subMessageStyle" id="subMessageStyle" class="select-2" data-dropdownparent="#subFormModal" data-field="message_style" data-default="firstOption" tabindex="3"> <select name="subMessageStyle" id="subMessageStyle" class="select-2" data-field="message_style" data-default="firstOption" tabindex="3">
</select> </select>
<div class="form-text">Appearance of delivered content.</div> <div class="form-text">Appearance of delivered content.</div>
</div> </div>
@ -44,21 +44,21 @@
<div class="col-lg-6 pe-lg-4"> <div class="col-lg-6 pe-lg-4">
<div class="mb-4"> <div class="mb-4">
<label for="subChannels" class="form-label">Channels</label> <label for="subChannels" class="form-label">Channels</label>
<select name="subChannels" id="subChannels" class="select-2" multiple data-dropdownparent="#subFormModal" data-field="channels" tabindex="5"></select> <select name="subChannels" id="subChannels" class="select-2" multiple data-field="channels" tabindex="5"></select>
<div class="form-text">Send content to these channels.</div> <div class="form-text">Send content to these channels.</div>
</div> </div>
</div> </div>
<div class="col-lg-6 ps-lg-4"> <div class="col-lg-6 ps-lg-4">
<div class="mb-4"> <div class="mb-4">
<label for="subFilters" class="form-label">Filters</label> <label for="subFilters" class="form-label">Filters</label>
<select name="subFilters" id="subFilters" class="select-2" multiple data-dropdownparent="#subFormModal" data-field="filters" tabindex="6"></select> <select name="subFilters" id="subFilters" class="select-2" multiple data-field="filters" tabindex="6"></select>
<div class="form-text">Filter out unwanted content.</div> <div class="form-text">Filter out unwanted content.</div>
</div> </div>
</div> </div>
<div class="col-lg-6 pe-lg-4"> <div class="col-lg-6 pe-lg-4">
<div class="mb-4 mb-lg-0"> <div class="mb-4 mb-lg-0">
<label for="subUniqueRules" class="form-label">Uniqueness Rules</label> <label for="subUniqueRules" class="form-label">Uniqueness Rules</label>
<select name="subUniqueRules" id="subUniqueRules" class="select-2" multiple data-dropdownparent="#subFormModal" required data-field="unique_rules" tabindex="7"></select> <select name="subUniqueRules" id="subUniqueRules" class="select-2" multiple required data-field="unique_rules" tabindex="7"></select>
<div class="form-text">Rules on telling content apart.</div> <div class="form-text">Rules on telling content apart.</div>
</div> </div>
</div> </div>

5
static/css/select2.css
View File

@ -1,5 +1,10 @@
/* Select 2 */ /* Select 2 */
/* Keep the select2 options visible above modals */
.select2-container--open {
z-index: 9999;
}
.select2-selection { .select2-selection {
background-color: var(--bs-body-bg) !important; background-color: var(--bs-body-bg) !important;
font-size: 1rem !important; font-size: 1rem !important;

4
static/js/base.js
View File

@ -52,11 +52,9 @@ $(document).ready(function() {
// Activate select2s // Activate select2s
$(".select-2").each(function() { $(".select-2").each(function() {
var dropdownParent = $(this).attr("data-dropdownparent");
$(this).select2({ $(this).select2({
theme: "bootstrap", theme: "bootstrap",
minimumResultsForSearch: 10, minimumResultsForSearch: 10
dropdownParent: dropdownParent
}); });
}); });