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
Michael Hedrick 2Michael Hedrick 2 

How can you center a VF page center screen

Hello,
How can a VF page be centered in the users window?  It either opens in left cowner or full screen.
Thanks,
M
Best Answer chosen by Michael Hedrick 2
Narender Singh(Nads)Narender Singh(Nads)
Hi Michael,

Try this to align the popup in the center :

var url='YOUR URL HERE';
var x = screen.width/2 - 700/2;
var y = screen.height/2 - 450/2;
window.open(url,'_blank','height=485,width=700,left='+x+',top='+y);

Or try this:
var url='YOUR URL HERE';
window.open(url,'Popup','height=400,width=1000,left=100,scrollbars=yes,top=100,toolbar=no,status=no');

Whichever works for you.

Let me know the results

All Answers

Raj VakatiRaj Vakati
Add Simple css 
  
html {
  text-align: center;
}

 
Michael Hedrick 2Michael Hedrick 2
Thanks Raj,
So do I reference the css like styleclass = "html"
And where do I reference it?  in the apex;form ?
Thanks,
M
Raj VakatiRaj Vakati
<apex:page>

<style>
body{
	
 text-align: center; 

.. other styles  
}

html {
  text-align: center;
}
</style>



</apex:page>

 
Michael Hedrick 2Michael Hedrick 2

Raj,

I have tried moving the CSS syntax around but all I get is a white pop up. 
 

apex:page standardController="Merchandising__c"  extensions="MerchandisingController"  standardstylesheets="false" showheader="false"  docType="html">
    <style>
        body{
    
        text-align: center; 
        
        <script>
            function Closewindow() 
               {
                   window.close(); <!-- closed VF page   --->
                   window.opener.location.href="/{!$CurrentPage.parameters.someId}";  <!-- Gets current page with Id paramter used in Account Button   --->
                   window.top.refresh();  <!-- refreshes SF Account page   --->
               } 
        </script>
       
        <div>
        <apex:form id="Merchandising">
            <apex:sectionHeader title="Choose Merchandizing"/>
                <apex:pageBlock title="Merch Page">
                    <apex:pageBlockSection columns="2">             
                    <apex:inputField value="{!merch.Merchandise__c}" required="true"/>
                    <apex:inputField value="{!merch.Date_Displayed__c}"/>
                    <apex:inputField value="{!merch.Merchandise_Category__c}" required="true"/>
                    <apex:outputfield value="{!merch.Date_Delivered__c}"  html-disabled="true" />
                    <apex:inputField value="{!merch.Merchandise_SubCategory__c}" required="true"/>                
                    <apex:inputField value="{!merch.Date_Removed_Replaced__c}"/>
                </apex:pageBlockSection>
            
                <Br></Br><Br></Br><Br></Br>            
                <div align="center" draggable="false" >
            
                    <apex:commandButton action="{!save}" value="Save" id="saveButton" reRender="Panel" />        
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <apex:commandButton value="Cancel" onclick="window.close();" immediate="true"/>
                
                </div>
                <apex:outputPanel id="Panel" style="font-size:16px;color:red">
                    <apex:messages /> <!-- Displays message from Apex Class of successful Record save -->
                    <apex:outputText value="{!calljavascript}" escape="false">   <!-- Used so that JS can be called from Apec Class   --->
                    </apex:outputText>
                </apex:outputPanel>
            </apex:pageBlock>
        </apex:form>
        &nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        } 
        html {
        text-align: center;
        }
    </style>
             
</apex:page>
Narender Singh(Nads)Narender Singh(Nads)
Hi Michael,

Try putting your code between center tag.
Like this: 
apex:page standardController="Merchandising__c"  extensions="MerchandisingController"  standardstylesheets="false" showheader="false"  docType="html-5.0">
    
        
        <script>
            function Closewindow() 
               {
                   window.close(); <!-- closed VF page   --->
                   window.opener.location.href="/{!$CurrentPage.parameters.someId}";  <!-- Gets current page with Id paramter used in Account Button   --->
                   window.top.refresh();  <!-- refreshes SF Account page   --->
               } 
        </script>
      <center> 
        <div>
        <apex:form id="Merchandising">
            <apex:sectionHeader title="Choose Merchandizing"/>
                <apex:pageBlock title="Merch Page">
                    <apex:pageBlockSection columns="2">             
                    <apex:inputField value="{!merch.Merchandise__c}" required="true"/>
                    <apex:inputField value="{!merch.Date_Displayed__c}"/>
                    <apex:inputField value="{!merch.Merchandise_Category__c}" required="true"/>
                    <apex:outputfield value="{!merch.Date_Delivered__c}"  html-disabled="true" />
                    <apex:inputField value="{!merch.Merchandise_SubCategory__c}" required="true"/>                
                    <apex:inputField value="{!merch.Date_Removed_Replaced__c}"/>
                </apex:pageBlockSection>
            
                <Br></Br><Br></Br><Br></Br>            
                <div align="center" draggable="false" >
            
                    <apex:commandButton action="{!save}" value="Save" id="saveButton" reRender="Panel" />        
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <apex:commandButton value="Cancel" onclick="window.close();" immediate="true"/>
                
                </div>
                <apex:outputPanel id="Panel" style="font-size:16px;color:red">
                    <apex:messages /> <!-- Displays message from Apex Class of successful Record save -->
                    <apex:outputText value="{!calljavascript}" escape="false">   <!-- Used so that JS can be called from Apec Class   --->
                    </apex:outputText>
                </apex:outputPanel>
            </apex:pageBlock>
        </apex:form>
        &nbsp;&nbsp;&nbsp;&nbsp;
        </div>
     </center>  
             
</apex:page>

Let me know if it helps
Thanks 
Michael Hedrick 2Michael Hedrick 2
Hello Narender ,
Tried to enclose the code between centertags earlier but it does not appear to make any difference.
Thanks,
M
Narender Singh(Nads)Narender Singh(Nads)
Hi,

Try this: 
apex:page standardController="Merchandising__c"  extensions="MerchandisingController"  standardstylesheets="false" showheader="false"  docType="html">
    <style>
        body{
           text-align: center; 
        } 
        html {
            text-align: center;
        }
    </style>
        
        <script>
            function Closewindow() 
               {
                   window.close(); <!-- closed VF page   --->
                   window.opener.location.href="/{!$CurrentPage.parameters.someId}";  <!-- Gets current page with Id paramter used in Account Button   --->
                   window.top.refresh();  <!-- refreshes SF Account page   --->
               } 
        </script>
       
        <div>
        <apex:form id="Merchandising">
            <apex:sectionHeader title="Choose Merchandizing"/>
                <apex:pageBlock title="Merch Page">
                    <apex:pageBlockSection columns="2">             
                    <apex:inputField value="{!merch.Merchandise__c}" required="true"/>
                    <apex:inputField value="{!merch.Date_Displayed__c}"/>
                    <apex:inputField value="{!merch.Merchandise_Category__c}" required="true"/>
                    <apex:outputfield value="{!merch.Date_Delivered__c}"  html-disabled="true" />
                    <apex:inputField value="{!merch.Merchandise_SubCategory__c}" required="true"/>                
                    <apex:inputField value="{!merch.Date_Removed_Replaced__c}"/>
                </apex:pageBlockSection>
            
                <Br></Br><Br></Br><Br></Br>            
                <div align="center" draggable="false" >
            
                    <apex:commandButton action="{!save}" value="Save" id="saveButton" reRender="Panel" />        
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <apex:commandButton value="Cancel" onclick="window.close();" immediate="true"/>
                
                </div>
                <apex:outputPanel id="Panel" style="font-size:16px;color:red">
                    <apex:messages /> <!-- Displays message from Apex Class of successful Record save -->
                    <apex:outputText value="{!calljavascript}" escape="false">   <!-- Used so that JS can be called from Apec Class   --->
                    </apex:outputText>
                </apex:outputPanel>
            </apex:pageBlock>
        </apex:form>
        &nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        
             
</apex:page>

 
Narender Singh(Nads)Narender Singh(Nads)
Hi M,
<center></center> tags are working as they should, aligning  your page to center. How come you are not getting it in the center using center tags
Michael Hedrick 2Michael Hedrick 2
Hey Narender,
I have values in the button - Window open property.  I have a height and width value.  I need the window to open a certain size.  AMybe thats is why the window is not being centered when opening?  I did not set the Window position in the button setting.
Narender Singh(Nads)Narender Singh(Nads)
Ohh, you want the pop up to be in the center.

Here is a code snippet(written in javascript), you can use this as a reference:
  
var url = '/apex/DelVF?id='+recordid; 

var html = "<p align='center'> <button class='btn' onclick='window.parent.box.hide(); return false;'>Close Popup</button></p> <p align='center'> <iframe id='iframeContentId' src='" + url + "' scrolling='auto' width='95%' height='300px' scrolling='no' /> "; 

var title = " <p align='center'>Create Event</p> "; 

function insertScript(){ 
var box = new SimpleDialog("hersh"+Math.random(), true); 
window.parent.box = box; 
box.setTitle(title ); 
box.createDialog(); 
box.setWidth(900); 
box.setContentInnerHTML(html); 
box.setupDefaultButtons(); 
box.show(); 
}

This is tried and tested. All you have to do is just use it to your advantage.
 
Michael Hedrick 2Michael Hedrick 2
Narender, I will keep at it.  It did not error on savinf the chnages but when I clicked the button I received an Invalid/Unexpected token error.  I will keep trying.  
Thanks,
M
Narender Singh(Nads)Narender Singh(Nads)
Hi Michael,

Try this to align the popup in the center :

var url='YOUR URL HERE';
var x = screen.width/2 - 700/2;
var y = screen.height/2 - 450/2;
window.open(url,'_blank','height=485,width=700,left='+x+',top='+y);

Or try this:
var url='YOUR URL HERE';
window.open(url,'Popup','height=400,width=1000,left=100,scrollbars=yes,top=100,toolbar=no,status=no');

Whichever works for you.

Let me know the results
This was selected as the best answer
Michael Hedrick 2Michael Hedrick 2
Narender,
Thank you for the recomendation. With the values hard coded will the center position be based on the users monitor resolution?
If we can use JS in the button can I use the function shown in this (http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html)example?
Michael Hedrick 2Michael Hedrick 2
I end up using this code which appears to put the VF page in the center of my screen.  I do not have my other monitor hooked up so I am not sure how that will work but we will see later.
This is the code I used which may be a bit overkill. 
var url='/apex/Merchandising_V2?someId={!Account.Id}';
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;  
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;  
var w = 800;
var h = 500;
             
width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;  
height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;  
              
var left = ((width / 2) - (w / 2)) + dualScreenLeft;  
var top = ((height / 2) - (h / 2)) + dualScreenTop;  

var newWindow = window.open(url,'_blank','scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

And for reference the 800 and 500 value was used to match the window size in my VF page: 
div class="content" style="background-color:green;height:500px;width:800px;

Thank you both for your help and persistence.
​ M
Narender Singh(Nads)Narender Singh(Nads)
I always learn something new in the process of helping you! So thank you! :D