+ Start a Discussion
Alex ShAlex 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!
Best Answer chosen by Alex Sh
Alex ShAlex Sh
Hi Sanjay, 
Thank you for response. It's exactly what I need. But if I remove ".slds-truncate" class - nothing changes.

All Answers

SKSANJAYSKSANJAY
Hi Alex,

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
Alex ShAlex Sh
Hi Sanjay, 
Thank you for response. It's exactly what I need. But if I remove ".slds-truncate" class - nothing changes.
This was selected as the best answer