diff --git a/app/assets/javascripts/enhancedTextbox.js b/app/assets/javascripts/enhancedTextbox.js index bd1a04882..f0eabd940 100644 --- a/app/assets/javascripts/enhancedTextbox.js +++ b/app/assets/javascripts/enhancedTextbox.js @@ -23,7 +23,7 @@
`) .after(this.$background = $(` - + `)) .on("input", this.update); @@ -37,7 +37,7 @@ this.initialHeight = visibleTextbox.height(); this.$background.css({ - 'border-width': this.$textbox.css('border-width') + 'border-width': this.$textbox.css('border-width'), }); visibleTextbox.remove(); @@ -73,16 +73,10 @@ ); this.update = () => { - const isEmpty = this.$textbox.val().trim() === ""; - if (isEmpty) { - this.$background.html( - this.highlightPlaceholders ? this.contentReplaced() : this.contentEscaped() - ); - this.$background.show(); - } else { - this.$background.hide(); - } + this.$background.html( + this.highlightPlaceholders ? this.contentReplaced() : this.contentEscaped() + ); this.resize(); diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss index 570c1082e..083061a39 100644 --- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss +++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss @@ -133,6 +133,7 @@ td.table-empty-message { line-height: 1.2; padding: units(1); font-family: family("sans"); + color: black; } .usa-dark-background .pill-item__label { @@ -604,12 +605,18 @@ details form { } &-background { + position: absolute; + top: 0; + left: 0; pointer-events: none; + color: black; white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; border: 2px solid transparent; padding-bottom: units(3); + z-index: 10; + opacity: 0; // transparent borders become visible in high contrast modes so set to match background @media (-ms-high-contrast: active), (forced-colors: active) {