1

I am not able to truncate a long text area field {! consult.Situation__c } when displayed in a Lightning component:

<aura:component controller="ConsultationListViewByOperatorCtrl" description="ConsultationListViewByOper" implements="forceCommunity:availableForAllPageTypes" access="global">
<aura:attribute name="Consultation" type="Consultation__c[]" access="global" />
<aura:attribute type="Boolean" name="sortAsc" />
<aura:attribute type="String" name="sortField" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="recordId" type="String" />
    <table class="slds-table slds-table--bordered slds-table--cell-buffer slds-table--striped">
        <thead>
        <tr class="slds-text-title_caps">
            <th scope="col" class="slds-text-title--caps">
                <div class="slds-truncate"  title="Name">Name</div>
            </th>
            <th scope="col">
                <div  class="slds-truncate" title="Name">Contact</div>
            </th>
            <th scope="col" onclick="{!c.sortByOper}">
                <div class="slds-truncate" title="Operator">Operator</div>
            </th>
            <th scope="col">
                <div class="slds-truncate" title="outcome">Outcome</div>
            </th>
            <th scope="col">
                <div class="slds-truncate"  title="status">Status</div>
            </th>
            <th scope="col" onclick="{!c.sortByFUp}" >
                <div class="slds-truncate" title="Follow Up">Follow-Up?</div>
            </th>
            <th scope="col" class="slds-size--1-of-7 slds-has-flexi-truncate" >
                <div class="slds-truncate" title="Stage">Situation</div>
            </th>
        </tr>
        </thead>
        <tbody >
        <aura:iteration var="consult" items="{!v.Consultation}">
            <a onclick="{!c.navigate}" data-value="{!consult.Id}">
                <tr >
                    <td data-label="Name" scope="row" >
                        <div class="slds-truncate" title="Name" >{! consult.Name }</div>
                    </td>
                    <td data-label="Contact" scope="row" >
                        <div class="slds-truncate" title="Client" >{! consult.Client__r.Name }</div>
                    </td>
                    <td data-label="Operator" scope="row" >
                        <div class="slds-truncate" title="Operator" >{! consult.Operator__r.Name }</div>
                    </td>
                    <td data-label="Outcome" scope="row" >
                        <div class="slds-truncate" title="Outcome">{! consult.Outcome__c }</div>
                    </td>
                    <td data-label="Status" scope="row">
                        <div class="slds-truncate" title="Status">{! consult.Status__c }</div>
                    </td>
                    <td data-label="Follow up?" scope="row" >
                        <div class="slds-truncate" title="Status">{! consult.Follow_up_required__c }</div>
                    </td>
                    <td data-label="Situation" class="slds-size--1-of-7" scope="row">
                        <div  class="slds-truncate" title="{! consult.Situation__c }">{! consult.Situation__c }</div>
                    </td>
                </tr>
           </a>
        </aura:iteration>
        </tbody>
    </table>

2
  • where exactly are you testing it? communities?
    – glls
    Commented Jan 9, 2018 at 18:36
  • also - please show a printscreen so we can see exactly what there is Commented Jan 10, 2018 at 7:57

1 Answer 1

2

I changed this element:

<td data-label="Situation" class="slds-size--1-of-7" scope="row">
   <div  class="slds-truncate" title="{! consult.Situation__c }">{!    consult.Situation__c }</div>
</td>

to the following:

<td data-label="Situation"  scope="row">
  <div class="slds-size_1-of-12">
    <p  class="slds-truncate" title="{! consult.Situation__c }">{!       consult.Situation__c }</p>
  </div>
</td>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .