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
3 files changed, +9 -62Showing whitespace changes
public/css/select2-overrides.css+5 -57
@@ -19,14 +19,14 @@
1919.select2-container .select2-selection .select2-selection__clear {
2020 color: var(--SmartThemeBodyColor);
2121 font-size: 20px;
22- padding: 0;
2322 position: absolute;
2423 right: 5px;
25- top: 0;
24+ margin-top: 0; /* compensate for the increased font size */
2625}
2726
2827.select2-container .select2-search--inline textarea.select2-search__field {
2928 opacity: 0.8;
29+ margin-top: 7px; /* get placeholder text to the center */
3030}
3131
3232.select2-selection--single .select2-selection__placeholder {
@@ -63,9 +63,10 @@
6363 background-color: var(--black30a);
6464 color: var(--SmartThemeBodyColor);
6565 border: 1px solid var(--SmartThemeBorderColor);
66- border-radius: 7px;
6766 font-family: var(--mainFontFamily);
6867 padding: 3px 5px;
68+ display: unset; /* override the ST textarea display style */
69+ border-radius: 0; /* border radius was interfering with cursor */
6970}
7071
7172/* Customize the selected option */
@@ -93,7 +94,6 @@
9394 border: 1px solid var(--SmartThemeBorderColor);
9495 border-radius: 7px;
9596 font-family: var(--mainFontFamily);
96- padding: 3px 5px;
9797}
9898
9999.select2-container.select2-container--focus .select2-selection--multiple,
@@ -230,55 +230,3 @@ span.select2.select2-container .select2-selection__choice__remove:hover {
230230.select2_choice_clickable_buttonstyle+span.select2-container .select2-selection__choice__display:hover {
231231 background-color: var(--white30a);
232232}
233-
234-/* Custom class to support same line multi inputs of select2 controls */
235-.select2_multi_sameline+span.select2-container .select2-selection--multiple {
236- display: flex;
237- flex-wrap: wrap;
238-}
239-
240-.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-search--inline {
241- /* Allow search placeholder to take up all space if needed */
242- flex-grow: 1;
243-}
244-
245-.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-selection__rendered {
246- /* Fix weird styling choice or huge margin around selected options */
247- margin-block-start: 2px;
248- margin-block-end: 2px;
249- display: flex;
250- align-items: center;
251- flex-wrap: wrap;
252- row-gap: 5px;
253-}
254-
255-.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-selection__choice {
256- margin-top: 0px;
257-}
258-
259-.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-search__field {
260- /* Min height to reserve spacing */
261- min-height: calc(var(--mainFontSize) + 13px);
262- /* Min width to be clickable */
263- min-width: 4em;
264- align-content: center;
265- /* Fix search textarea alignment issue with UL elements */
266- margin-top: 0px;
267- height: unset;
268- /* Prevent height from jumping around when input is focused */
269- line-height: 1;
270-}
271-
272-.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-selection__rendered {
273- /* Min height to reserve spacing */
274- min-height: calc(var(--mainFontSize) + 13px);
275-}
276-
277-/* Make search bar invisible unless the select2 is active, to save space */
278-.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-search--inline {
279- height: 1px;
280-}
281-
282-.select2_multi_sameline+span.select2-container.select2-container--focus .select2-selection--multiple .select2-search--inline {
283- height: unset;
284-}
public/css/world-info.css+0 -1
@@ -107,7 +107,6 @@
107107 height: auto;
108108 margin-top: 0;
109109 margin-bottom: 0;
110- min-height: calc(var(--mainFontSize) + 14px);
111110}
112111
113112.delete_entry_button {
public/index.html+4 -4
@@ -4307,7 +4307,7 @@
43074307 </span>
43084308 </div>
43094309 <div class="range-block-range">
43104310 <select id="world_info" class="select2_multi_sameline" multiple>
43114311 <option value="" data-i18n="-- World Info not found --">-- World Info not found -- </option>
43124312 </select>
43134313 </div>
@@ -6273,7 +6273,7 @@
62736273 </span>
62746274 </small>
62756275 <small class="textAlignCenter" data-i18n="Primary Keywords">Primary Keywords</small>
62766276 <select class="keyprimaryselect keyselect select2_multi_sameline" name="key" data-i18n="[placeholder]Keywords or Regexes" placeholder="Keywords or Regexes" multiple="multiple"></select>
62776277 <textarea class="text_pole keyprimarytextpole mobile" name="key" rows="1" data-i18n="[placeholder]Comma separated list" placeholder="Comma separated list" style="display: none;"></textarea>
62786278 <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">
62796279 ⌨️
@@ -6295,7 +6295,7 @@
62956295 </span>
62966296 </small>
62976297 <small class="textAlignCenter" data-i18n="Optional Filter">Optional Filter</small>
62986298 <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>
62996299 <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>
63006300 <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">
63016301 ⌨️
@@ -6482,7 +6482,7 @@
64826482 </label>
64836483 </div>
64846484 <div class="range-block-range">
64856485 <select name="characterFilter" class="select2_multi_sameline" multiple>
64866486 <option value="" data-i18n="-- Characters not found --">
64876487 -- Characters not found --
64886488 </option>