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 Jan 9 '18 at 18:36
  • also - please show a printscreen so we can see exactly what there is – Itai Shmida Jan 10 '18 at 7:57
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>

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.