0
260
ViewsAjuste dinámico del área de texto de Lightning-Input-Rich-Text
Estoy tratando de aumentar la altura del cuadro del área de texto después de que un usuario crea varios saltos de línea dentro del área de texto. Tengo problemas para encontrar una manera de apuntar al valor de la altura del área de texto para aumentarlo por salto de línea. Apreciaría cualquier ayuda. Gracias.
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
¿Has visto ganchos para peinar ? Lea el artículo, lea la documentación para textarea , verifique si agrega TextBoxSizing.css con algo como
:host { --sds-c-textarea-sizing-min-height: 10em; }funciona bien
Si es así, el siguiente paso sería agregar una variable controlada por JavaScript a CSS. Hace un tiempo tuve una pregunta similar: https://salesforce.stackexchange.com/q/341324/799
¿Algo como esto?
<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