0

I am trying to truncate a richText field in a table.I've tried to use 'slds-truncate' but to no avail. Here's what I'm getting: enter image description here Here's the code I'm using:

<table class="slds-table slds-table--bordered slds-m-top--x-small">
            <thead>
                <tr class="slds-text-title--caps">
                    <th>{!$Label.c.CandidatDetail_DateConfirmationReference}</th>
                    <th>{!$Label.c.CandidatDetail_CommentaireCre}</th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v._candidateDetails.contact.ReferencesCandidat__r}" var="ref">
                    <tr>
        <th><ui:outputDate value="{!ref.DateConfirmationReference__c}" format="dd/MM/yyyy"/></th>
       <th><div class="slds-truncate">{!ref.CommentairesCRE__c}</div> </th>                                

I've tried to put directly a custom class in lightning:formattedRichText with the following css properties:

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

But it's not working either... I'm a bit lost, I don't know what else I could try.

ETA: I've also tried to use 'slds-table--fixed-layout' but it's not working either.

ETA: I've replaced by a div but have 2 new issues. One of the column doesn't display the full name of the column. And now, instead of only having the value of the comment field, I have <p>, <span>, style=... added next to the value. I don't understand why. I've updated the code. enter image description here

  • List item
  • what class style using table ? i think your not using fixed-layout class, update your question with table code – sdandamud1 Jul 1 '19 at 13:42
  • I've updated my comment. I've also tried to use -fixed-layout, but it wasn't working either – chloe Jul 1 '19 at 13:51
  • can you try to replace with div instead of lightning:formattedRichText for testing purpose? like <table class="slds-table slds-table--bordered slds-m-top--x-small slds-table_fixed-layout"><div class="slds-truncate">{!ref.CommentairesCRE__c} </table> – sdandamud1 Jul 1 '19 at 14:10
  • Thank you so much ! Putting it in a div did work, but I now have a new issue. I've updated the code again to show a pic of the new issue – chloe Jul 1 '19 at 14:48
  • why did you put th in tbody ?is there any specific reason? – sdandamud1 Jul 1 '19 at 14:56
0

i just reproduce your code and fixed with some changes. let me know if you find any issues. enter image description here

cmp

<aura:attribute name="myDate" type="Date" default="2019-07-01"/>

     <table class="slds-table slds-table_bordered 
    slds-max-medium-table_stacked-horizontal slds-table_fixed-layout">
            <thead>
                <tr class="slds-text-title--caps">
                    <th scope="col">todaydate</th>
                    <th scope="col">Comments</th>
                    <th scope="col">todaydate</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th><ui:outputDate value="{!v.myDate}" format="dd/MM/yyyy"/></th>
                    <th><div class="slds-truncate">THIS IS LONG TEXT THIS IS LONG TEXT THIS IS LONG TEXT THIS IS LONG TEXT THIS IS LONG TEXT THIS IS LONG TEXT THIS IS LONG TEXT THIS IS LONG TEXT THIS IS LONG TEXT THIS IS LONG TEXT THIS IS LONG TEXT</div> </th>
                     <th><ui:outputDate value="{!v.myDate}" format="dd/MM/yyyy"/></th>
                </tr>
            </tbody>
    </table>
| improve this answer | |
  • Still have both of my issue. Weird since it's working for you...I do have more columns though, I just didn't put them here for more clarity since I only have issue with 2 of this columns... – chloe Jul 1 '19 at 15:38
  • did you remove custom css? – sdandamud1 Jul 1 '19 at 15:40
  • yes I did removed custom css – chloe Jul 1 '19 at 15:57
  • i would suggest try with simple table as i did in my answer not your actual data, i think some where your css is overridden – sdandamud1 Jul 1 '19 at 16:00

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.