0
255
ViewsDynamically Adjusting Lightning-Input-Rich-Text's textarea
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);
}
}
});
}
}
·
Juan Pablo Isaza
1 answers
Answer question0
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?
<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);
}
·
Juan Pablo Isaza
Report
Answer question