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
Ravikant Ravikant 10Ravikant Ravikant 10 

Can anyone guide me how we can let the visualforce page to auto-resize based on resolution.

Hi,

I am creating a visualforce page which works fine on Chrome browser in windows 8 with resolution 1366x768 but when the resolution is 
HP 1920 x1080
Microsoft Surface 2736x1824
iPad 768 x1024
then I am are getting white spaces at the bottom.
Can anyone guide me how we can let the visualforce page to auto-resize based on resolution.

Thanks,
Ravi
 
Pranav S SanvatsarkarPranav S Sanvatsarkar
Hello Ravikant,

Try adding following code to your visualforce page, 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tag will render the page more precisely contents based on the device width in which it is being rendered. This tag should be added wherever you include scripts and css files.

Thanks. 
 
Ravikant Ravikant 10Ravikant Ravikant 10
Hi Pranav,

I tried doing that but could not see the solution working based on the different resolution.

Could you please look at my code and let me know how can we do that?

<apex:page standardController="Opportunity" extensions="CTR_PopulateOli" action="{!createOlis}" showHeader="false" >
    <apex:pageMessages id="showmsg"></apex:pageMessages>
 <html>
        <head>
            <apex:includeScript value="/support/console/32.0/integration.js"></apex:includeScript>
            <apex:stylesheet value="{!URLFOR($Resource.slds103, 'assets/styles/salesforce-lightning-design-system.min.css')}"></apex:stylesheet>
            <apex:stylesheet value="{!URLFOR($Resource.slds103, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}"></apex:stylesheet>
        </head>
        <body>
            <div class="slds-page-header" role="banner">
          <!-- PAGE HEADER TOP ROW -->
          <div class="slds-grid">
            <!-- PAGE HEADER / ROW 1 / COLUMN 1 -->
            <div class="slds-col">
          <!-- HEADING AREA -->
          <!-- MEDIA OBJECT = FIGURE + BODY -->
          <div class="slds-media">
            <div class="slds-media__figure">
              <svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-user">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.slds103, 'assets/icons/standard-sprite/svg/symbols.svg#account')}"></use>
              </svg>
            </div>
            <apex:outputPanel rendered="true">
                <div class="slds-media__body">
                  <p class="slds-text-heading--label" >Account</p>
                  <h1 class="slds-text-heading--medium" >{!AccName}</h1>
                </div>
            </apex:outputPanel>
            
          </div>
          <!-- / MEDIA OBJECT -->
          <!-- HEADING AREA -->
        </div>
        <!-- / PAGE HEADER / ROW 1 / COLUMN 1 -->
        <!-- PAGE HEADER / ROW 1 / COLUMN 2 -->
        <div class="slds-col slds-no-flex slds-align-middle">
          <div class="slds-button-group" role="group">
            
            
            
            <div style="{!IF(bpId != null,'','display:none')}"><input type="button" class="slds-button slds-button--neutral" value="{!$Label.SYT_SP_Btn_GotoBP}" onClick="javascript:location.href = '/{!bpId}';" /></div>
            <input type="button" class="slds-button slds-button--neutral" value="{!$Label.SYT_SP_Btn_GotoOpp}" onClick="javascript:location.href = '/{!opportunityId}';" />
            <div style="{!IF(showManageOffers && !errorExists,'','display:none')}"><input  type="button" class="slds-button slds-button--neutral" value="{!$Label.Manage_Offers}" onClick="window.open('/apex/VF_TargetOffer?spid={!opportunityId}');"/></div> <!-- US-126545 -->
            
          </div>
        </div>
        <!-- / PAGE HEADER / ROW 1 / COLUMN 2 -->
      </div>    
                
            <div class="slds-grid slds-page-header__detail-row">
                <!-- PAGE HEADER / ROW 2 / COLUMN 1 -->
                <div class="slds-col--padded slds-size--1-of-4">
                    <dl>
                        <dt>
                            <p class="slds-text-heading--label slds-truncate">{!$Label.SYT_SP_lbl_Opp}</p>
                        </dt>
                        <dd>
                            <!---removed slds-truncate class as intended in TKT-012524 for viewing the full name of Opportunity---->
                            <p class="slds-text-body--regular">{!oppName}</p>
                       </dd>
                   </dl>
              </div>
              <!-- PAGE HEADER / ROW 2 / COLUMN 2 -->
              <div class="slds-col--padded slds-size--1-of-4">
              <dl>
                  <dt>
                      <p class="slds-text-heading--label slds-truncate">{!$Label.SYT_SP_lbl_Year}</p>
                  </dt>
                  <dd>
                      <p class="slds-text-body--regular slds-truncate">{!oppYear}</p>
                  </dd>
               </dl>
           </div>
           <!-- PAGE HEADER / ROW 2 / COLUMN 3 -->
           <div class="slds-col--padded slds-size--1-of-4">
               <dl>
                  <dt>
                    <p class="slds-text-heading--label slds-truncate">{!$Label.SYT_SP_lbl_Status}</p>
                  </dt>
                  <dd>
                      <p class="slds-text-body--regular slds-truncate" id="statusField">{!status}</p>
                  </dd>
               </dl>
           </div>

    </div>
 </div>  
     </body>
    </html>
    <apex:outputPanel rendered="{!!errorExists}">
        <apex:include pageName="GBEmbed_Opportunity_Orig"/>
    </apex:outputPanel>    
    
</apex:page>


Thanks in advance.