1

Im trying to increase the height of the textarea box after a user creates several line breaks within the textarea. I'm having issues finding a way to target the value of the textarea height in order to increase it per line break. I would appreciate any help. Thank you.

import { LightningElement } from 'lwc';

export default class TextBoxSizing extends LightningElement {
    handleTextBoxChange(event){
        let eventArr = [];
        let lineBreaks = 0;
    
        eventArr.push(...event.target.value); 
        eventArr.forEach(e =>{
          if(e == '/'){
          lineBreaks++;
          if(lineBreaks > 5) {

          let lirt = this.template.querySelector('lightning-input-rich-text').height; //undefined 
          console.log(lirt); 
 
          } 
         }
       });
    }
}
denzgrant
  • 11
  • 2
  • 3

2 Answers2

0

Have you seen styling hooks? Read the article, read the documentation for textarea, check if adding TextBoxSizing.css with something like

:host {
    --sds-c-textarea-sizing-min-height: 10em;
}

works OK.

If it does - next step would be to add a JavaScript-controlled variable to CSS. I had similar question a while ago: https://salesforce.stackexchange.com/q/341324/799

Something like this?

enter image description here

<template>
    <lightning-card>
        <lightning-input-rich-text value={text}></lightning-input-rich-text>

        <lightning-input type="number" label="Wheee :)" value={lines} onchange={handleLines} min="1" max="99"
            variant="label-inline">
        </lightning-input>
    </lightning-card>
</template>

import { LightningElement } from 'lwc';

export default class StackTextarea extends LightningElement {

    text = '<b>Hello!</b>';
    lines = 1;

    connectedCallback() {
        this.resize();
    }

    handleLines(event) {
        this.lines = event.target.value;
        this.resize();
    }

    resize() {
        document.documentElement.style.setProperty('--rtf-size', (this.lines * 2) + 'em');
    }
}

:host{
    --sds-c-textarea-sizing-min-height: var(--rtf-size);
}
eyescream
  • 18,088
  • 2
  • 34
  • 46
  • For rich text it's probably https://www.lightningdesignsystem.com/components/rich-text-editor/#Styling-Hooks-Overview but same idea applies – eyescream Mar 25 '22 at 17:25
  • Im actually am using styling hooks. My problem is coming from trying to target ":host { --sds-c-textarea-sizing-min-height: 10em; }" within the js to change it dynamically. – denzgrant Mar 25 '22 at 17:33
  • I don't think I understand what you're after, when I played with RTF the field seemed to auto grow as I was pressing Enter key anyway. But this should give you some ideas – eyescream Mar 25 '22 at 23:11
0

In case someone needs it, I went for the following

100% Rich Text Area

import { LightningElement, api, track } from 'lwc';

export default class inputRichTextFSC_LWC extends LightningElement {
    
    //Handle updates to Rich Text field with enhanced features
    handleTextChange(event) {

    }

}
:host {
    --slds-c-textarea-sizing-min-height: 100%;
    --slds-c-textarea-sizing-max-height: 100%;
}
<template>
  <div>
    <lightning-input-rich-text onchange={handleTextChange}>
    </lightning-input-rich-text>
  </div>
</template>
Valmen
  • 1