Apex Code Development You need to sign in to do that
Don't have an account?
Alex Sh show more/less text in VF section
Hi All,
I have VF page with table like this:
<apex:page standardController="Account" extensions="ActivityController" >
<apex:form >
<apex:pageblock title="Activity" >
<apex:pageBlockTable value="{!AllRecords}" var="rec">
<apex:column value="{!rec.Type}" headerValue="Type"/>
<apex:column value="{!rec.Subj}" headerValue="Subject"/>
</apex:column>
<apex:column value="{!rec.description}" headerValue="Description"/>
</apex:pageBlockTable>
</apex:pageblock>
</apex:form>
</apex:page>
The description field is a text field and it's too long. So I need to add "Show more/ Show less" button for this in table. Can someone pls suggest the best way to do this?Thanks!
Thank you for response. It's exactly what I need. But if I remove ".slds-truncate" class - nothing changes.
All Answers
Add below CSS
<style> .slds-truncate{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 100px; <!-- Decide your width --> } </style>Restructure you description column like below code<apex:column styleClass="slds-truncate" headerValue="Description"> <span class="description">{!If(LEN(rec.description) > 100, LEFT(rec.description, 100) , rec.description)}</span> <apex:outputPanel rendered="{!LEN(rec.description) > 100}"> <a href="Javascript:void(0);" onclick="showMore()">Show More</a> </apex:outputPanel> </apex:column>It will show only 100 character long text. If the text is longer than 100...show more link will be shown. Write javascript code to remove the "slds-truncate" class from corresponding column.
Hope this will help you
Thanks,
Sanjay
Thank you for response. It's exactly what I need. But if I remove ".slds-truncate" class - nothing changes.