+ Start a Discussion
Ty WhitfieldTy Whitfield 

Lightning Component Long Text Fields go off page

I've created a Lightning Component record page using lightning:recordForm.  The logic for what we wanted works, however, I've noticed that Rich Text, Long Text fields, etc. will go on past the page even using slds-truncate_container_25, wordwrap, css max-width.  Is there a way to fix this
<lightning:card iconName="utility:description" title="Description">   
            <table  class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped slds-rich-text-area__content slds-grow slds-cell-wrap">
            <tr>
                <td >
                      <lightning:recordViewForm recordId="{!v.recordId}" objectApiName="Opportunity">   
                     <div style="max-width:300px" class="slds-box">
                  
                    <lightning:outputField fieldName="Description" />
                </div>                
                    
                  
                             
                        </lightning:recordViewForm>
                    
                  <!--  <lightning:recordForm  aura:id="myRecordForm" recordId="{!v.recordId}" objectApiName="Opportunity" fields="{!v.descriptionFields}" columns="1" mode="view"  >  
                         <lightning:outputField fieldName="Description" />
                    </lightning:recordForm>-->
                </td>
            </tr>
        </table>      
    </lightning:card>

Page View
Best Answer chosen by Ty Whitfield
Ty WhitfieldTy Whitfield
Figured it out.  I had to remove all of the table elements.  I can't believe I spent half a day on that.  Thanks @abhishek for your help

All Answers

Abhishek BansalAbhishek Bansal
Hi,

Can you try the below options:
  • Change max-width to width
  • Remove the div and apply width tag to td
  • If supported try applying width tag to the lightning:output tag itself.
Let me know if this works for you.

Thanks,
Abhishek Bansal.
Ty WhitfieldTy Whitfield
Thanks but that still didn't work
<lightning:card iconName="utility:description" title="Description">   
            <table  class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped slds-rich-text-area__content slds-grow slds-cell-wrap">
            <tr>
                <td style="width:300px">
                    <lightning:recordViewForm   recordId="{!v.recordId}" objectApiName="Opportunity">                   
                  
                     <lightning:outputField style="width:300px" fieldName="Description" />                             
                        </lightning:recordViewForm>                
                       
                   
                </td>
            </tr>
        </table>      
    </lightning:card>

 
Ty WhitfieldTy Whitfield
Figured it out.  I had to remove all of the table elements.  I can't believe I spent half a day on that.  Thanks @abhishek for your help
This was selected as the best answer