fix heights for WI 2ndary / SD prefix/neg inputs

public/index.html

@@ -2077,14 +2077,14 @@
                                     <h4>Keywords</h4>
                                     <h5>Seperate by commas</h5>
                                 </label>
-                                <textarea class="text_pole" name="key" class="key" rows="1" placeholder="" maxlength="250"></textarea>
+                                <textarea class="text_pole keyprimarytextpole" name="key" rows="1" placeholder="" maxlength="250"></textarea>
                             </div>
                             <div class="world_entry_form_control keysecondary">
                                 <label for="keysecondary">
                                     <h4>Secondary Required Keywords</h4>
                                     <h5>Separate by commas</h5>
                                 </label>
-                                <textarea class="text_pole" name="keysecondary" rows="1" placeholder="" maxlength="250"></textarea>
+                                <textarea class="text_pole keysecondarytextpole" name="keysecondary" rows="1" placeholder="(secondary keywords here)" maxlength="250"></textarea>
                             </div>
                         </div>
                         <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>

public/scripts/extensions/stable-diffusion/index.js

@@ -6,7 +6,7 @@ import {
     showSwipeButtons
 } from "../../../script.js";
 import { getApiUrl, getContext, extension_settings, defaultRequestArgs } from "../../extensions.js";
-import { stringFormat } from "../../utils.js";
+import { stringFormat, initScrollHeight, resetScrollHeight } from "../../utils.js";
 
 // Wraps a string into monospace font-face span
 const m = x => `<span class="monospace">${x}</span>`;
@@ -88,7 +88,10 @@ async function loadSettings() {
     $('#sd_width').val(extension_settings.sd.width).trigger('input');
     $('#sd_height').val(extension_settings.sd.height).trigger('input');
 
+
     await Promise.all([loadSamplers(), loadModels()]);
+
+
 }
 
 function onScaleInput() {
@@ -105,11 +108,13 @@ function onStepsInput() {
 
 function onPromptPrefixInput() {
     extension_settings.sd.prompt_prefix = $('#sd_prompt_prefix').val();
+    resetScrollHeight($(this));
     saveSettingsDebounced();
 }
 
 function onNegativePromptInput() {
     extension_settings.sd.negative_prompt = $('#sd_negative_prompt').val();
+    resetScrollHeight($(this));
     saveSettingsDebounced();
 }
 
@@ -321,7 +326,7 @@ jQuery(async () => {
             <label for="sd_sampler">Sampling method</label>
             <select id="sd_sampler"></select>
             <label for="sd_prompt_prefix">Generated prompt prefix</label>
-            <textarea id="sd_prompt_prefix" class="text_pole textarea_compact" rows="1"></textarea>
+            <textarea id="sd_prompt_prefix" class="text_pole textarea_compact" rows="2"></textarea>
             <label for="sd_negative_prompt">Negative prompt</label>
             <textarea id="sd_negative_prompt" class="text_pole textarea_compact" rows="2"></textarea>
         </div>
@@ -336,5 +341,12 @@ jQuery(async () => {
     $('#sd_negative_prompt').on('input', onNegativePromptInput);
     $('#sd_width').on('input', onWidthInput);
     $('#sd_height').on('input', onHeightInput);
+
+    $('.sd_settings .inline-drawer-toggle').on('click', function () {
+        initScrollHeight($("#sd_prompt_prefix"));
+        initScrollHeight($("#sd_negative_prompt"));
+    })
+
     await loadSettings();
+
 });

public/scripts/utils.js

@@ -164,15 +164,22 @@ export function restoreCaretPosition(element, position) {
 }
 
 export async function resetScrollHeight(element) {
-    element.style.height = '';
+    $(element).css('height', '0px');
-    element.style.height = (element.scrollHeight) + 3 + 'px';
+    $(element).css('height', $(element).prop('scrollHeight') + 3 + 'px');
 }
 
 export async function initScrollHeight(element) {
     await delay(1);
-    const height = Number($(element).prop("scrollHeight") + 3);
+
-    console.log(`init height to ${height}`);
+    const curHeight = Number($(element).css("height").replace('px', ''));
-    //console.log(element.style.height);
+    const curScrollHeight = Number($(element).prop("scrollHeight"));
+    const diff = curScrollHeight - curHeight;
+
+    if (diff < 3) { return } //happens when the div isn't loaded yet
+
+    const newHeight = curHeight + diff + 3; //the +3 here is to account for padding/line-height on text inputs
+    //console.log(`init height to ${newHeight}`);
     $(element).css("height", "");
-    $(element).css("height", `${height}px`);
+    $(element).css("height", `${newHeight}px`);
+    //resetScrollHeight(element);
 }

public/scripts/world-info.js

@@ -188,6 +188,7 @@ function appendWorldEntry(entry) {
             .filter((x) => x);
         saveWorldInfo();
     });
+
     keySecondaryInput.val(entry.keysecondary.join(",")).trigger("input");
     initScrollHeight(keySecondaryInput);
 
@@ -235,13 +236,17 @@ function appendWorldEntry(entry) {
             .closest(".world_entry")
             .find(".keysecondary");
 
-        const keyPrimary = $(this)
+        const keysecondarytextpole = $(this)
             .closest(".world_entry")
-            .find(".key");
+            .find(".keysecondarytextpole");
 
-        const keyPrimaryHeight = $(keyPrimary).css('height');
+        const keyprimarytextpole = $(this)
+            .closest(".world_entry")
+            .find(".keyprimarytextpole");
+
+        const keyprimaryHeight = keyprimarytextpole.outerHeight();
+        keysecondarytextpole.css('height', keyprimaryHeight + 'px');
 
-        keysecondary.css('height', keyPrimaryHeight) + 'px';
         value ? keysecondary.show() : keysecondary.hide();
 
     });