function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Shannon VEShannon VE 

lightning component field with vertical scroll bar

I'm working on my first "real" lightning component, trying to extend what I've learned through a couple Trailhead trails and other Lightning component examples to my own real world component, but I can't figure out how to make a field look a certain way.

My scenario is this, I have a custom object with one or many contacts related to it.  I'm creating a record page component to show Activities related to the contacts who are related to my custom object record. I have an Apex class returning the activity records and my lightning component is showing those records.  However, the Activity Description field in my component extends in size to show all of the text within the Description.  I can't figure out how to add a vertical scroll bar to my field.  

I'd like to try to mimick one of the features of the standard Activities component, where the Description field is set to show the first 10 lines and offers a vertical scroll bar to see more.

What type of component item provides the means to show the vertical scroll bar and limit its size?

Here's an example, where my component extends the Activity Description field to fit the text.
Custom lightning component showing Description field extended to fit the text
Here's the standard Activity component where the Description is limited to 10 lines and offers a scroll bar to show more.
User-added image
Best Answer chosen by Shannon VE
Alain CabonAlain Cabon
I used  <ui:inputTextArea aura:id="comments" value="default value" rows="10" cols="80" disabled="true" />

var oTextarea = component.find("comments"); oTextarea.set("v.value", message);

The result seems close to your pattern with some differences (rounded icon instead of squared with a white background, the line on the left side doesn't appear at the beginning).
 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <span class="slds-assistive-text">Email</span>
    <div class="slds-media">
        <div class="slds-media__body">
            <div class="slds-media slds-media--timeline slds-timeline__media--email">
                <div class="slds-media__figure slds-timeline__icon">
                    <div class="slds-icon_container">
                        <lightning:icon iconName="action:email" size="x-small" alternativeText="email"/>  
                    </div>
                </div>
                <div class="slds-media__body">
                    <p class="slds-truncate" title="Mobile conversation on Monday"><a href="javascript:void(0);">Mobile conversation on Monday</a></p>
                    <p class="slds-truncate">Hi guys, Thanks for meeting with the team today and going through the proposals we saw. This goes on until it’s truncated.</p>
                    <ul class="slds-list--horizontal slds-wrap">
                        <li class="slds-m-right--large">
                            <span class="tile__label slds-text-heading--label-normal">To:</span>
                            <span class="slds-text-body--small"><a href="javascript:void(0);">Lei Chan</a></span>
                        </li>
                        <li class="slds-m-right--large">
                            <span class="tile__label slds-text-heading--label-normal">From:</span>
                            <span class="slds-text-body--small"><a href="javascript:void(0);">Jason Dewar</a></span>
                        </li>
                        <li class="slds-m-right_large">             
                            <ui:inputTextArea aura:id="comments" value="default value" rows="10" cols="80" disabled="true" />
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="slds-media__figure slds-media__figure--reverse">
            <div class="slds-timeline__actions">
                <p class="slds-timeline__date">Feb 24</p>
                <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">                 
                    <lightning:icon iconName="utility:switch" size="x-small" alternativeText="switch"/>        
                    <span class="slds-assistive-text">Switch</span>
                </button>
            </div>
        </div>
    </div>
</aura:component>
 
{
	doInit : function(component, event, helper) {
        var message = "";
        for (var i=0;i < 20;i++) {
            message += "test of a long message with many columns, blabla and reblabla and so on, blabla bla. Very interesting \n";
        }
       var oTextarea = component.find("comments");
       oTextarea.set("v.value", message);   
	}
})

User-added image

Regards

All Answers

Alain CabonAlain Cabon
I used  <ui:inputTextArea aura:id="comments" value="default value" rows="10" cols="80" disabled="true" />

var oTextarea = component.find("comments"); oTextarea.set("v.value", message);

The result seems close to your pattern with some differences (rounded icon instead of squared with a white background, the line on the left side doesn't appear at the beginning).
 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <span class="slds-assistive-text">Email</span>
    <div class="slds-media">
        <div class="slds-media__body">
            <div class="slds-media slds-media--timeline slds-timeline__media--email">
                <div class="slds-media__figure slds-timeline__icon">
                    <div class="slds-icon_container">
                        <lightning:icon iconName="action:email" size="x-small" alternativeText="email"/>  
                    </div>
                </div>
                <div class="slds-media__body">
                    <p class="slds-truncate" title="Mobile conversation on Monday"><a href="javascript:void(0);">Mobile conversation on Monday</a></p>
                    <p class="slds-truncate">Hi guys, Thanks for meeting with the team today and going through the proposals we saw. This goes on until it’s truncated.</p>
                    <ul class="slds-list--horizontal slds-wrap">
                        <li class="slds-m-right--large">
                            <span class="tile__label slds-text-heading--label-normal">To:</span>
                            <span class="slds-text-body--small"><a href="javascript:void(0);">Lei Chan</a></span>
                        </li>
                        <li class="slds-m-right--large">
                            <span class="tile__label slds-text-heading--label-normal">From:</span>
                            <span class="slds-text-body--small"><a href="javascript:void(0);">Jason Dewar</a></span>
                        </li>
                        <li class="slds-m-right_large">             
                            <ui:inputTextArea aura:id="comments" value="default value" rows="10" cols="80" disabled="true" />
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="slds-media__figure slds-media__figure--reverse">
            <div class="slds-timeline__actions">
                <p class="slds-timeline__date">Feb 24</p>
                <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">                 
                    <lightning:icon iconName="utility:switch" size="x-small" alternativeText="switch"/>        
                    <span class="slds-assistive-text">Switch</span>
                </button>
            </div>
        </div>
    </div>
</aura:component>
 
{
	doInit : function(component, event, helper) {
        var message = "";
        for (var i=0;i < 20;i++) {
            message += "test of a long message with many columns, blabla and reblabla and so on, blabla bla. Very interesting \n";
        }
       var oTextarea = component.find("comments");
       oTextarea.set("v.value", message);   
	}
})

User-added image

Regards
This was selected as the best answer
Shannon VEShannon VE
Thank you Alain, that's the tip I needed.  I had looked at InputTextArea, but then dismissed it because I thought it would remain editable.  I didn't notice the ability to disable.  Thanks again.
Alain CabonAlain Cabon
Good. I tried many combinations with <ui:inputTextArea> <ui:outputTextArea> <textarea> and <lightning:textarea> and I have had the same problem as you got until I found the correct combination.  <ui:outputTextArea> should be more logical but that doesn't work as expected. 
The solution is short but each detail is important.