Skip to main content
Topics#VisualforceFrage von Jessica Owens
Jessica Owens fragte in #Visualforce
16. Sept. 2015, 17:50

How to lock rows for vertical scrolling on visualforce page

We have a VF page for entering hours by week (columns across) by resource (rows down) and the page was set up correctly for scrolling horizontally ("Role" and Name" columns on left are locked when scrolling to the right) but we need to be able to lock the top row (shows "Role" and "Name" headers as well as the weekly start date) so that as we scroll down our long list of resoruces, we still see which weeks we're entering data for. Currently, the entire web page scrolls down and we lose everything at the top -- would love to know how we can either lock the page or specifiy a scroll of the table only (vs page).

I'm not a developer but have learned my way around custom objects, fields, pages, workflows, etc and can follow instruction very well. Happy to share/send the VF markup if that helps enables an answer!

Thanks in advance...
4 Antworten
  1. Neetu Bansal (Deloitte)
    16. Sept. 2015, 18:29
    Hi Jessica,

    Below is an example for fixed headers and scrollbars in a table. This is just an example, you need to use this in your requirement.

    Apex class:

    public class AccountController
    {
    	public Account acc { get; set; }
    	public AccountController( ApexPages.StandardController stdcontroller )
    	{
    		acc = ( Account )stdController.getRecord();
    		if( acc.Id != null )
    		{
    			acc = [ Select Id, Website, Name, ( Select Id, Name, FirstName, Description, LastName from Contacts ) from Account where Id =: acc.Id ];
    		}
    	}
    }

    Visualforce Page:

    <apex:page standardController="Account" extensions="AccountController" tabStyle="Account" id="pageId" title="Account" >
    	<style>
            ⌗tableDiv
            {
                overflow:auto;
                height:281px;
            }
    	</style>
    	<apex:form id="form" >
    		<apex:pageBlock title="Account Details">
    			<apex:outputPanel>
    				<table class="list" border="0" cellpadding="0" cellspacing="0">
    					<tr class="headerRow">
    						<th class="headerRow" style="width:10%;" > Name </th>
    						<th class="headerRow" style="width:45%;" > FirstName </th>
    						<th class="headerRow" style="width:45%;" > LastName </th>
    					</tr>
    				</table>
    				<div id="tableDiv">
    					<table class="list " border="0" cellpadding="0" cellspacing="0">
    						<apex:repeat value="{!acc.Contacts}" var="con" id="repeat" >
    							<tr class="dataRow">
    								<td class="dataCell" style="width:10%;" > {!con.Name} </td>
    								<td class="dataCell" style="width:45%;" > {!con.FirstName} </td>
    								<td class="dataCell" style="width:45%;" > {!con.LastName} </td>
    							</tr>
    						</apex:repeat>
    					</table>
    				</div>
    			</apex:outputPanel>
    		</apex:pageBlock>
    	</apex:form>
    </apex:page>

    Try this code, and you will see fixed header. Let me know if you need any other help.

    Thanks,

    Neetu
Antwort schreiben...
0/9000