function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
John GerhardJohn Gerhard 

pageblocktable max row height

Hello, fairly new at VisualForce and Apex. I am running into an issue I can not seem to figure out. I am using a page block table and I want to limit the height of each row, as the comments section of some records could be 100 lines which makes the table massive while others are 1-2 lines. I would like to limit the row to 3 lines or 25px. In the screenshot below you can see the 5th record/row is taking up a ton of room and I would like to limit the height of it.

User-added image

Here is the code for that table specifically...
  
<!-- Task History and Call History -->
            <apex:pageBlock title="Task History/Call History">

             <div align="center">
            <apex:commandButton action="{!saveOldTasks}" value="Save Task Changes" id="saveTaskChangeButton" style="display:none"/>
            </div>

            <apex:pageBlockTable value="{!taskHistory}" var="o" title="Task History" id="closedTaskTable" >
                <apex:column headerValue="Subject">
                    <apex:outputLink value="{!URLFOR($Action.Task.View, o.Id)}">
                    {!o.Subject}
                    </apex:outputLink>
                </apex:column>
                <apex:column value="{!o.Call_Result__c}"/>
                <apex:column Headervalue="Comments">
                    <apex:outputField value="{!o.Description}" >
                    <apex:inlineEditSupport event="ondblclick" showOnEdit="saveTaskChangeButton"/>
                </apex:outputField>
            </apex:column>
                <apex:column value="{!o.ActivityDate}"/>
                <apex:column value="{!o.qbdialer__Call_Date_Time__c}"/>
                <apex:column value="{!o.OwnerID}"/>
            </apex:pageBlockTable>

            </apex:pageBlock>

 
Best Answer chosen by John Gerhard
Alain CabonAlain Cabon
Hello,
  
<style>        
   .mydiv {
        display: fixed;
        max-height: 15px;
        max-width: 100px;
        overflow: hidden;
   }
</style>
  
<apex:column Headervalue="Comments">
     <div class="mydiv">
          <apex:outputField value="{!o.Description}" >
          <apex:inlineEditSupport event="ondblclick" showOnEdit="saveTaskChangeButton"/>
     </div>
 </apex:outputField>

My test with a list of contacts (it is the complete VFP): the double click is still working. 
  
<apex:page standardController="Account">
    <style>        
        .mydiv {
        display: fixed;
        max-height: 15px;
        max-width: 100px;
        overflow: hidden;
        }
    </style>
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        You are viewing the {!account.name} account.
    </apex:pageBlock>
    <apex:form>       
        <apex:pageBlock title="Contacts">
            <apex:pageBlockTable value="{!account.Contacts}" var="contact">
                <apex:column value="{!contact.Name}"/>
                <apex:column value="{!contact.MailingCity}"/>
                <apex:column value="{!contact.Phone}"/>
                <apex:column Headervalue="Comments">
                    <div class="mydiv">
                        <apex:outputField value="{!contact.Description}" >
                            <apex:inlineEditSupport event="ondblclick" showOnEdit="saveTaskChangeButton"/>
                        </apex:outputField>                       
                    </div>                 
                </apex:column>
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>

All the best

Alain

All Answers

Alain CabonAlain Cabon
Hello,
  
<style>        
   .mydiv {
        display: fixed;
        max-height: 15px;
        max-width: 100px;
        overflow: hidden;
   }
</style>
  
<apex:column Headervalue="Comments">
     <div class="mydiv">
          <apex:outputField value="{!o.Description}" >
          <apex:inlineEditSupport event="ondblclick" showOnEdit="saveTaskChangeButton"/>
     </div>
 </apex:outputField>

My test with a list of contacts (it is the complete VFP): the double click is still working. 
  
<apex:page standardController="Account">
    <style>        
        .mydiv {
        display: fixed;
        max-height: 15px;
        max-width: 100px;
        overflow: hidden;
        }
    </style>
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        You are viewing the {!account.name} account.
    </apex:pageBlock>
    <apex:form>       
        <apex:pageBlock title="Contacts">
            <apex:pageBlockTable value="{!account.Contacts}" var="contact">
                <apex:column value="{!contact.Name}"/>
                <apex:column value="{!contact.MailingCity}"/>
                <apex:column value="{!contact.Phone}"/>
                <apex:column Headervalue="Comments">
                    <div class="mydiv">
                        <apex:outputField value="{!contact.Description}" >
                            <apex:inlineEditSupport event="ondblclick" showOnEdit="saveTaskChangeButton"/>
                        </apex:outputField>                       
                    </div>                 
                </apex:column>
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>

All the best

Alain
This was selected as the best answer
John GerhardJohn Gerhard
Alain,

You sir are my hero, I spent two days trying to find a resource that would do exactly this. Thank you so much! Do you know where I can find documentation that explains this?
Alain CabonAlain Cabon
John, 

I did not have an answer at first for your problem but your question was interesting and I needed the same "trick" for my own VFP.

A smart solution would try to use the rowClasses or styleClass and I tried to use them but nothing worked.

Basically, there is always a basic html <table> with <tr> and <td> generated from the VFP code.

How to set maximum height for table-cell?​
https://stackoverflow.com/questions/13667941/how-to-set-maximum-height-for-table-cell

This problem of maximum height for the rows is very popular on stackoverflow (hundreds of "like" when a solution is working).

The lesson is given by Jukka K. Korpela above ("you have to use a <div>").

So I have finally just combined the lesson with the div and the CSS samples with my basic VFP until I found the combination which works before posting it here.

That's all.

Best regards

Alain