+ Start a Discussion
NeedHelp55NeedHelp55 

Need Help on adding a scrollbar on Field Column.

Here is my Code ...

 

<apex:page id="page" sidebar="false" controller="describe">
<apex:includeScript value="{!URLFOR($Resource.jqueryStable, '/js/jquery-1.7.2.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.jqueryStable, '/js/jquery-ui-1.8.20.custom.min.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.jqueryStable, '/css/cupertino/jquery-ui-1.8.20.custom.css')}"/>

<!-- <script>
$(function() {
$( ".dataCell" ).draggable();
});
</script>-->

<apex:form id="formid">
<apex:pageBlock title="Report Wizard" id="pb1">
<apex:pageBlocksection columns="3" id="pbs1" collapsible="true">
<apex:pageBlockSectionItem id="pbst1">
<apex:pageBlocktable value="{!fields}" var="da" >
<apex:column headerValue="Field" value="{!da}"/>
</apex:pageBlocktable>
</apex:pageBlockSectionItem>

</apex:pageBlock>
</apex:form>
</apex:page>

Best Answer chosen by Admin (Salesforce Developers) 
AnushaAnusha
mention width & height in style attribute of PageBlock Table
like,

<apex:pageBlockTable style="width:500px;height:200px;overflow:scroll">

</apex:pageblockTable>

All Answers

AnushaAnusha
<apex:page id="page" sidebar="false" controller="describe">
<apex:includeScript value="{!URLFOR($Resource.jqueryStable, '/js/jquery-1.7.2.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.jqueryStable, '/js/jquery-ui-1.8.20.custom.min.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.jqueryStable, '/css/cupertino/jquery-ui-1.8.20.custom.css')}"/>

<!-- &lt;script&gt;
$(function() {
$( ".dataCell" ).draggable();
});
&lt;/script&gt;-->

<apex:form id="formid">
<apex:pageBlock title="Report Wizard" id="pb1">
<apex:pageBlocksection columns="3" id="pbs1" collapsible="true">
<apex:pageBlockSectionItem id="pbst1">
<apex:pageBlocktable value="{!fields}" var="da" >
<apex:column headerValue="Field">
<div style="width:100px;height:100px;overflow:scroll;">{!da}</div>
</apex:column>
</apex:pageBlocktable>
</apex:pageBlockSectionItem>

</apex:pageBlock>
</apex:form>
</apex:page>
NeedHelp55NeedHelp55

Thanks Anusha.

Can u tell me, how  to add scrolling for the whole pageBlockTable?

AnushaAnusha
mention width & height in style attribute of PageBlock Table
like,

<apex:pageBlockTable style="width:500px;height:200px;overflow:scroll">

</apex:pageblockTable>
This was selected as the best answer
NeedHelp55NeedHelp55

For column scrolling is fine but when i am adding the same style to pageBlockTable it's not working.