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
r1985r1985 

Adding horizontal scrollbar

Hi,

 

Kindly help me with adding the horizontal scrollbar for the table of mobile visualforce code shown below.

 

<apex:page controller="AccountSearchControllerMobile"  sidebar="false"

showHeader="false" standardStylesheets="false" setup="false">
 <body bgcolor="#E0E0F0">
  <apex:form >
  <apex:pageMessages />
 
    <apex:pageBlock mode="edit" title="Search Results" >
      <center>
          <apex:commandbutton value="New Search" action="{!back}" />
          </center>
    <br/>
        <apex:pageBlockTable value="{!accounts}" var="account" border="2" align="center" id="results">

            <apex:column headerValue="Account Name" value="{!account.name}"/>
           
           <apex:column headerValue="Shipping Street" value="{!account.ShippingStreet}"/>
         
            <apex:column headerValue="Shipping City" value="{!account.ShippingCity}"/>
       
            <apex:column headerValue="Shipping State" value="{!account.ShippingState}"/>
         
            <apex:column headerValue="Shipping Country" value="{!

account.ShippingCountry}"/>
          
            <apex:column headerValue="Shipping Postal Code" value="{!

account.ShippingPostalCode}"/>
         

            <apex:column headerValue="Owner Name" value="{!account.owner.name}"/>          
        

            <apex:column headerValue="Owner Email" value="{!account.owner.email}"/>
        

            <apex:column headerValue="Ricoh Channel" value="{!

account.Ricoh_Channel__c}"/>
     
        </apex:pageBlockTable>
 

      <apex:panelGrid columns="4">
            <apex:commandLink action="{!first}"

reRender="results">First</apex:commandlink>
            <apex:commandLink action="{!previous}" rendered="{!hasPrevious}"

reRender="results">Previous</apex:commandlink>
            <apex:commandLink action="{!next}" rendered="{!hasNext}"

reRender="results">Next</apex:commandlink>
            <apex:commandLink action="{!last}" reRender="results">Last</apex:commandlink>
   
        </apex:panelGrid>
       
    </apex:pageBlock>
    

  </apex:form>
 </body>
</apex:page>

 

Thanks,

MVP

 

kiranmutturukiranmutturu

try to add the style like this  style="overflow:scroll;height:300px;" 
cloudcodercloudcoder

little side note. Horizontal scroll is not a great user experience, especially for mobile phones. I would suggest looking at your page layouts, and app design to refactor how your app works.