Select2 visual bug fix (#4207) * attempt at fixing select2 spacing issue across browsers * found the actual problem * fixing placeholder text * fixing placeholder text again * removing references to the select2_multi_sameline --------- Co-authored-by: qvink <qvink@users.noreply.github.com>

b3bc065713564600e9eff223defa75228cef64d7

qvink <191186569+qvink@users.noreply.github.com>

Signed

Parents: b1887a0cc262af4c7884bcaa48ab3a3fabe49514

public/css/select2-overrides.css+5 -57 Viewed

 .select2-container .select2-selection .select2-selection__clear {
     color: var(--SmartThemeBodyColor);
     font-size: 20px;
-    padding: 0;
     position: absolute;
     right: 5px;
-    top: 0;
+    margin-top: 0;  /* compensate for the increased font size */
+}
-.select2-container .select2-search__field {
+.select2-container .select2-search--inline textarea.select2-search__field {
     opacity: 0.8;
+    margin-top: 7px;  /* get placeholder text to the center */
+}
 .select2-selection--single .select2-selection__placeholder {

     background-color: var(--black30a);
     color: var(--SmartThemeBodyColor);
     border: 1px solid var(--SmartThemeBorderColor);
-    border-radius: 7px;
     font-family: var(--mainFontFamily);
     padding: 3px 5px;
+    display: unset;  /* override the ST textarea display style */
+    border-radius: 0;  /* border radius was interfering with cursor */
+}
 /* Customize the selected option */

     border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 7px;
     font-family: var(--mainFontFamily);
-    padding: 3px 5px;
+}
 .select2-container.select2-container--focus .select2-selection--multiple,

 .select2_choice_clickable_buttonstyle+span.select2-container .select2-selection__choice__display:hover {
     background-color: var(--white30a);
+}
-/* Custom class to support same line multi inputs of select2 controls */
-.select2_multi_sameline+span.select2-container .select2-selection--multiple {
-    display: flex;
-    flex-wrap: wrap;
-}
-.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-search--inline {
-    /* Allow search placeholder to take up all space if needed */
-    flex-grow: 1;
-}
-.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-selection__rendered {
-    /* Fix weird styling choice or huge margin around selected options */
-    margin-block-start: 2px;
-    margin-block-end: 2px;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    row-gap: 5px;
-}
-.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-selection__choice {
-    margin-top: 0px;
-}
-.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-search__field {
-    /* Min height to reserve spacing */
-    min-height: calc(var(--mainFontSize) + 13px);
-    /* Min width to be clickable */
-    min-width: 4em;
-    align-content: center;
-    /* Fix search textarea alignment issue with UL elements */
-    margin-top: 0px;
-    height: unset;
-    /* Prevent height from jumping around when input is focused */
-    line-height: 1;
-}
-.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-selection__rendered {
-    /* Min height to reserve spacing */
-    min-height: calc(var(--mainFontSize) + 13px);
-}
-/* Make search bar invisible unless the select2 is active, to save space */
-.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-search--inline {
-    height: 1px;
-}
-.select2_multi_sameline+span.select2-container.select2-container--focus .select2-selection--multiple .select2-search--inline {
-    height: unset;
-}

public/css/world-info.css+0 -1 Viewed

     height: auto;
     margin-top: 0;
     margin-bottom: 0;
-    min-height: calc(var(--mainFontSize) + 14px);
+}
 .delete_entry_button {

public/index.html+4 -4 Viewed

                                 </span>
                             </div>
                             <div class="range-block-range">
-                                <select id="world_info" class="select2_multi_sameline" multiple>
+                                <select id="world_info" multiple>
                                     <option value="" data-i18n="-- World Info not found --">-- World Info not found -- </option>
                                 </select>
                             </div>

                                 </span>
                             </small>
                             <small class="textAlignCenter" data-i18n="Primary Keywords">Primary Keywords</small>
-                            <select class="keyprimaryselect keyselect select2_multi_sameline" name="key" data-i18n="[placeholder]Keywords or Regexes" placeholder="Keywords or Regexes" multiple="multiple"></select>
+                            <select class="keyprimaryselect keyselect" name="key" data-i18n="[placeholder]Keywords or Regexes" placeholder="Keywords or Regexes" multiple="multiple"></select>
                             <textarea class="text_pole keyprimarytextpole mobile" name="key" rows="1" data-i18n="[placeholder]Comma separated list" placeholder="Comma separated list" style="display: none;"></textarea>
                             <button type="button" class="switch_input_type_icon" tabindex="-1" title="Switch to plaintext mode" data-i18n="[title]Switch to plaintext mode" data-icon-on="✨" data-icon-off="⌨️" data-tooltip-on="Switch to fancy mode" data-tooltip-off="Switch to plaintext mode">
                                 ⌨️

                                 </span>
                             </small>
                             <small class="textAlignCenter" data-i18n="Optional Filter">Optional Filter</small>
-                            <select class="keysecondaryselect keyselect select2_multi_sameline" name="keysecondary" data-i18n="[placeholder]Keywords or Regexes (ignored if empty)" placeholder="Keywords or Regexes (ignored if empty)" multiple="multiple"></select>
+                            <select class="keysecondaryselect keyselect" name="keysecondary" data-i18n="[placeholder]Keywords or Regexes (ignored if empty)" placeholder="Keywords or Regexes (ignored if empty)" multiple="multiple"></select>
                             <textarea class="text_pole keysecondarytextpole mobile" name="keysecondary" rows="1" data-i18n="[placeholder]Comma separated list (ignored if empty)" placeholder="Comma separated list (ignored if empty)" style="display: none;"></textarea>
                             <button type="button" class="switch_input_type_icon" tabindex="-1" title="Switch to plaintext mode" data-i18n="[title]Switch to plaintext mode" data-icon-on="✨" data-icon-off="⌨️" data-tooltip-on="Switch to fancy mode" data-tooltip-off="Switch to plaintext mode">
                                 ⌨️

                             </label>
                         </div>
                         <div class="range-block-range">
-                            <select name="characterFilter" class="select2_multi_sameline" multiple>
+                            <select name="characterFilter" multiple>
                                 <option value="" data-i18n="-- Characters not found --">
                                     -- Characters not found --
                                 </option>