function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ethanoneethanone 

Apply CSS to LWC

I've got a simple LWC for a rich text box. The default size is only a few lines and I'd like to make it bigger.
Here is the HTML for lwc: 
<template>
<lightning-input-rich-text value={rtval} onchange={handleChange}>
</lightning-input-rich-text>
</template>
How do I make the text box have height:14em?
 
VinayVinay (Salesforce Developers) 
Hi,

Review below working examples of lightning-input-rich-text.

https://salesforce.stackexchange.com/questions/187051/make-lightninginputrichtext-length-longer
https://salesforce.stackexchange.com/questions/264719/how-to-adjust-min-height-of-salesforce-lightning-input-rich-text-component-on-lo

Hope above information was helpful.

Please mark as Best Answer so that it can help others in the future.

Thanks,
Vinay Kumar
ethanoneethanone
Thanks, those should work, but they do not. I can change it in the chrome developer tools, but the css file has no effect. Any other suggestions?
Shenton MakaylaShenton Makayla
To do that, we're going to have to go into our component add a CSS file. So in the same directory new file, going to call it firstComponent. css . Since lightning Web Components use the Shadow DOM to style our individual components will use the CSS pseudo class of :host to specify in our component only https://www.targetpayandbenefits.us/
ethanoneethanone
Can you provide an example?

DOM inspector says class="slds-rich-text-editor__textarea slds-grid" but the below doesn't work. 
.THIS .slds-rich-text-editor__textarea {
height:14em;
}