1

Hi I am building one custom LWC component and I need to set the height of the lightning-textarea

<template>
    <div class="slds-m-vertical_medium">
        <h1 class="slds-text-heading_small">Various Textarea Examples</h1>
        <p class="slds-text-body_regular">The following examples show various ways to create a textarea component.</p>
    </div>
    <div class="row">
        <h2 class="header">Basic Examples</h2>
        <lightning-textarea name="input1" label="Enter some text" ></lightning-textarea>
    </div>
</template>

I have tried custom class style attribute along with below but nothing can set the custom height. Any idea how to set the custom height to show more rows?

.slds-textarea{
line-height: 15rem;
height: 15rem !important;
}
.textarea-container slds-textarea{
    height: 15rem !important;
}
textarea{
    min-height: 15rem;
    height:15rem;
}
2

I dont think this is possible in lightning-text area but you can simply use text area with slds class where you can specify rows attribute

<div class="slds-form-element">
<label class="slds-form-element__label" for="textarea-id-01">Textarea Label</label>
<div class="slds-form-element__control">
<textarea id="textarea-id-01" rows=10 class="slds-textarea" placeholder="Placeholder Text"></textarea>
</div>
</div>
2
  • Thanks I already did this thanks for sharing I am looking for an answer why it is not possible – Avijit Chakraborty Mar 31 '20 at 2:24
  • @AvijitChakraborty you can't style child components from parents (or siblings for that matter) due to LWC's use of Shadow DOM. – User6670 Mar 31 '20 at 4:27
2

In my case I was using lightning-input-field within a lightning-record-edit-form for a textarea field - using a design token in the CSS file of the modal component I was building adjusted the textarea size without any further customizations needed:

:host {
   --sds-c-textarea-sizing-min-height: 200px;
}

Design token mentioned here: https://www.lightningdesignsystem.com/components/textarea/

0

You can accomplish this by loading the style from a static resource. Save a CSS file as below and load it into your static resources

.slds-textarea {
    height: 20rem;
}

Then, in your LWC, you can load the style in the connectedCallback

import {LightningElement} from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import largeTextArea from '@salesforce/resourceUrl/largeTextArea';

export default class LargeTextArea extends LightningElement {
    connectedCallback() {
        Promise.all([
            loadStyle(this, largeTextArea )

        ]).then(() => {
            
        })
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.