+ Start a Discussion
Eric FortenberryEric Fortenberry 

How to dynamically set outputPanel height to a % of the screen height

Hello, I have visualforce page with 3 columns and within each column there is one or mutliple pageBlocks that have either a chart or outputPanel.  For the first column I have two pageBlocks that have one chart in each.  I'd like to set both the chart heights to 50% of the screen height.  Is that possible?  

And same thing with the second and third columns, they have one pageBlock with one outputPanel that I'd like to set the height to 100% of the screen height.

Thanks for the help!
Eric FortenberryEric Fortenberry
Here is my code:
<apex:page id="page" tabStyle="Case" controller="ActionFunctionCaseNotificationController" showHeader="false" sidebar="false">
    <apex:includeScript value="{!$Resource.cometd}"/>
    <apex:includeScript value="{!$Resource.jquery}"/>
    <apex:includeScript value="{!$Resource.json2}"/>
    <apex:includeScript value="{!$Resource.jquery_cometd}"/>

    <!--JavaScript block to subscribe to the channel notifications-->
    <script type="text/javascript">
      var j$ = jQuery.noConflict();
      j$(document).ready(function() {

       // Connect to the CometD endpoint
       j$.cometd.init({
       url: window.location.protocol+'//'+window.location.hostname+'/cometd/29.0/',
           requestHeaders: { Authorization: 'OAuth {!$Api.Session_ID}'}
       });
 
       j$.cometd.subscribe('/topic/CaseNotifications', function(message) { 
	   findCaseDetails(message.data.sobject.Id);
       });

       j$.cometd.subscribe('/topic/GithubIssueNotifications', function(message) {
   	  findIssueDetails(message.data.sobject.Id);
       });

       j$.cometd.subscribe('/topic/DevRequestNotifications', function(message) {
 	 findRequestDetails(message.data.sobject.Id);
       });
            
     });
   </script>
   
   <style>
	.panelLeft {
	    	width: 25%;
 	        vertical-align: top;
	 }
        .panelCenter {
	    	width: 37.5%;
	    	vertical-align: top;
	 }
        .panelRight {
 	    	width: 37.5%;
	    	vertical-align: top;
	}
   </style>
    
    <!--Add a sectionHeader and form to the page-->
    <apex:sectionHeader title="OrgSync TV" subTitle="Support Channel" />
	<apex:form id="form">
    
           <apex:panelGroup >
	   <apex:pageBlock title="CaseStatus">  				
	     <apex:chart data="{!statusData}" height="200" width="100%" background="#F5F5F5">
		 <apex:legend position="right"/>
		 <apex:pieSeries labelField="value" dataField="nRecs" donut="50">
	             <apex:chartLabel display="middle" orientation="vertical" font="bold 12px Helvetica"/>
		</apex:pieSeries>
	      </apex:chart>		
	    </apex:pageBlock>
	    <apex:pageBlock title="CasePriority">
	       <apex:chart data="{!priorityData}" height="200" width="100%" resizable="false" background="#F5F5F5">
	  	 <apex:legend position="right"/>
		 <apex:pieSeries labelField="value" dataField="nRecs" donut="50">
		   	<apex:chartLabel display="middle" orientation="vertical" font="bold 12px Helvetica"/>
		</apex:pieSeries>
	       </apex:chart>		
	     </apex:pageBlock>
	   </apex:panelGroup>   
 		   
        <apex:pageBlock title="Recent Cases">
        <apex:outputPanel layout="block" style="height:950px;overflow-y:scroll;">
           <apex:repeat value="{!cases}" var="cw">
               <apex:pageBlockSection title="{!cw.c.subject}" columns="2">
                  <apex:outputField value="{!cw.c.caseNumber}" label="Case #"/>
                     <apex:outputField value="{!cw.c.status}"/>
                     <apex:outputField value="{!cw.c.priority}"/>
                     <apex:pageBlockSectionItem >
                          <apex:outputLabel value="Owner"/>
                          <apex:outputField value="{!cw.c.owner.name}"/>
                     </apex:pageBlockSectionItem>
                     <apex:pageBlockSectionItem >
                          <apex:outputLabel value="Account"/>
                          <apex:outputField value="{!cw.c.account.name}"/>
                     </apex:pageBlockSectionItem>
                     <apex:pageBlockSectionItem >
                          <apex:outputLabel value="Contact"/>
                          <apex:outputField value="{!cw.c.contact.name}"/>
                        </apex:pageBlockSectionItem>
                    </apex:pageBlockSection>
                </apex:repeat>
            </apex:outputPanel>
            </apex:pageBlock> 
            
            <apex:panelGroup>
            <apex:pageBlock title="New GHIssues">
            <apex:outputPanel layout="block" style="height:440px;overflow-y:scroll;">
                <apex:repeat value="{!issues}" var="iw">
                    <apex:pageBlockSection title="{!iw.i.name}" columns="2">
                        <apex:outputField value="{!iw.i.Issue_Number__c}" label="Issue #"/>
                        <apex:outputField value="{!iw.i.State__c}"/>                        
                        <apex:outputField value="{!iw.i.Created_At__c}" label="Created"/>                        
                        <apex:outputField value="{!iw.i.Closed_At__c}" label="Closed"/> 
                    </apex:pageBlockSection>
                </apex:repeat>
            </apex:outputPanel>
            </apex:pageBlock>
            
            <apex:pageBlock title="New Requests">
            <apex:outputPanel layout="block" style="height:440px;overflow-y:scroll;">
                <apex:repeat value="{!requests}" var="rw">
                    <apex:pageBlockSection title="{!rw.r.Dev_Request_Name__c}" columns="2">
                        <apex:outputField value="{!rw.r.Contact_Full_Name__c}"/>
                        <apex:outputField value="{!rw.r.Contact__r.Account.School_Name__c}"/>
 		    </apex:pageBlockSection>
                    <apex:pageBlockSection columns="1">
                        <apex:outputField value="{!rw.r.Notes__c}"/> 
                    </apex:pageBlockSection>
                </apex:repeat>
            </apex:outputPanel>
            </apex:pageBlock>
            </apex:panelGroup>

	</apex:panelGrid>

	<apex:actionFunction action="{!addCaseId}" name="findCaseDetails" rerender="form">
		<apex:param name="caseId" assignTo="{!caseId}" value="" />
	</apex:actionFunction>

        <apex:actionFunction action="{!addIssueId}" name="findIssueDetails" rerender="form">
		<apex:param name="issueId" assignTo="{!issueId}" value="" />
	</apex:actionFunction>

        <apex:actionFunction action="{!addRequestId}" name="findRequestDetails" rerender="form">
		<apex:param name="requestId" assignTo="{!requestId}" value="" />
	</apex:actionFunction>
        
    </apex:form>
</apex:page>


AmitAmit (Salesforce Developers) 
Hi,

As your requirement is to build the dynamic page block table with dynamic columns, you need to takecare that nothing should be hard-coded. So kindly go through below sample code:

Visualforce Page Code:
<apex:page controller=""DynamicTableController"">
<apex:pageBlock >
    <apex:form >
        <apex:actionFunction name=""ObjectFileds"" action=""{!ObjectFields}""/>
       
        <apex:commandButton  value=""Show Table"" action=""{!ShowTable}""/>
       
        <apex:pageBlockSection >
            <apex:pageBlockSectionItem >
                <apex:outputLabel value=""Select Object""/>
                <apex:selectList multiselect=""false"" size=""1"" value=""{!SelectedObject}"" onchange=""ObjectFileds();"">
                    <apex:selectOption itemLabel=""--None--"" itemValue=""--None--""/>
                    <apex:selectoptions value=""{!supportedObject}"" />
                </apex:selectlist>
            </apex:pageBlockSectionItem>
           
            <apex:pageBlockSectionItem >
                <apex:outputLabel value=""Select Field""/>
                <apex:selectList multiselect=""true"" size=""5"" value=""{!SelectedFields}"">
                    <apex:selectOption itemLabel=""--None--"" itemValue=""--None--""/>
                    <apex:selectoptions value=""{!fieldLableAPI}"" />
                </apex:selectlist>
            </apex:pageBlockSectionItem>
           
            <apex:pageBlockTable rendered=""{!IF(ObjectList.size > 0 , true , false)}"" value=""{!ObjectList}"" var=""rec"">
                <apex:column value=""{!rec.Id}"" rendered=""{!IF(SelectedFields.size == 0 , true, false)}""/>
                <apex:repeat value=""{!SelectedFields}"" var=""FieldLable"">
                    <apex:column value=""{!rec[FieldLable]}"" rendered=""{!IF(FieldLable != '--None--' , true, false)}""/>
                </apex:repeat>
            </apex:pageBlockTable>
           
            <apex:outputPanel rendered=""{!IF(ObjectList.size < 1 , true , false)}"">
                <apex:pageMessage severity=""ERROR"" summary=""No records to display""/>
            </apex:outputPanel>
           
        </apex:pageBlockSection>
       
    </apex:form>
</apex:pageBlock>
</apex:page>

Apex Code (Class):
public class DynamicTableController
{
    //List displayed on UI
    public List<selectoption> supportedObject {get; set;}
   
    //Selected Object
    public String SelectedObject {get; set;}
   
    //Global describe
    Map<String, Schema.SObjectType> gd = Schema.getGlobalDescribe();
    Set<String> objectKeys = gd.keySet();
   
    //Field Select List
    public List<SelectOption> fieldLableAPI {get; set;}
   
    //Selected fields to be displayed in table
    public List<String> SelectedFields {get; set;}
   
    //List to maintain dynamic query result
    public List<sObject> ObjectList {get; set;}
   
   
    //Constructor
    public DynamicTableController()
    {
        //Initialize
        supportedObject = new List<selectoption>() ;
        SelectedObject = '' ;
        fieldLableAPI = new List<SelectOption>() ;
        SelectedFields = new List<String>() ;
        ObjectList = new List<sObject>() ;
       
        //Get only reference to objects
        for(Schema.SObjectType item : ProcessInstance.TargetObjectId.getDescribe().getReferenceTo())
        {
            //Excluding custom setting objects
            if(!item.getDescribe().CustomSetting)
            {
                //Adding to list
                supportedObject.add(new SelectOption(item.getDescribe().getLocalName().toLowerCase() , item.getDescribe().getLabel() ));
            }
        }
       
    }
   
    //Get fields of selected object
    public void ObjectFields()
    {
        if(SelectedObject != '--None--')
        {
            //Creating sObject for dynamic selected object
            Schema.SObjectType systemObjectType = gd.get(SelectedObject);
            //Fetching field results
            Schema.DescribeSObjectResult r = systemObjectType.getDescribe();
               
            Map<String, Schema.SObjectField> M = r.fields.getMap();
            //Creating picklist of fields
            for(Schema.SObjectField fieldAPI : M.values())
            {
                fieldLableAPI.add(new SelectOption(fieldAPI.getDescribe().getName() , fieldAPI.getDescribe().getLabel())) ;
            }
        }
    }
   
    public void ShowTable()
    {
        //Creating dynamic query with selected field
        String myQuery = 'Select Id ' ;
       
        for(String field : SelectedFields)
        {
            if(field.toLowerCase() != 'id' && field.toLowerCase() != '--none--')
            myQuery += ','+ field + ' ' ;
        }
       
        //Limit is 100 for now you can change it according to need
        myQuery += ' from ' + SelectedObject + ' LIMIT 100' ;
       
        //Executing the query and fetching results
        ObjectList = Database.query(myQuery) ;
    }
}

Once user selects any object from the first picklist, filld picklist will be populated with all the field labels related to that object.

Note, it's a multi-select picklist so user can select multiple fields. Once fields are selected and ""Show Table"" is clicked, page block table will display the field values (selected in field picklist) of all records (limit is 100 right now, you can change it according to your need).

I hope this helps."