I am using visualforce page for community self-registration. Somehow it only covers the half page which looks weird. Screenshot attched.

enter image description here

How can I fix this so that it occupies the whole page. Here is the visualforce code:

<apex:page id="communitiesSelfRegPage" showHeader="true" standardStylesheets="true" controller="CommunitiesSelfRegController" title="{!$Label.site.user_registration}">
 <apex:define name="body">      
<apex:form id="theForm" forceSSL="true">

        <apex:pageBlock >
                    <apex:pageMessages id="error"/>
                   <apex:panelGrid columns="2" style="margin-top:1em;"> 
                      <apex:outputLabel value="First Name" for="firstName"/>
                      <apex:inputText required="true" id="firstName" value="{!firstName}" label="First Name"/>

                      <apex:outputLabel value="Last Name" for="lastName"/>
                      <apex:inputText required="true" id="lastName" value="{!lastName}" label="Last Name"/>

                      <apex:outputLabel value="{!$Label.site.community_nickname}" for="communityNickname"/>
                      <apex:inputText required="true" id="communityNickname" value="{!communityNickname}" label="{!$Label.site.community_nickname}"/>

                      <apex:outputLabel value="{!$Label.site.email}" for="email"/>
                      <apex:inputText required="true" id="email" value="{!email}" label="{!$Label.site.email}"/>

                      <apex:outputLabel value="{!$Label.site.password}" for="password"/>
                      <apex:inputSecret id="password" value="{!password}"/>

                      <apex:outputLabel value="{!$Label.site.confirm_password}" for="confirmPassword"/>
                      <apex:inputSecret id="confirmPassword" value="{!confirmPassword}"/>

                      <apex:outputText value=""/>
                      <apex:commandButton action="{!registerUser}" value="{!$Label.site.submit}" id="submit"/>




1 Answer 1


The default mode for an apex:panelGrid is "no larger than necessary", the same behavior that you get with any sort of HTML <table>. You need to specify a width:

<apex:panelGrid width="100%" columns="2" style="margin-top:1em;"> 

You will also likely need to specify special CSS to get the columns to look right, so you might start from here:

.dataCol { width: 20% }
.valueCol { width: 80% }
.valueCol input { display: inline-block; width: 100% }
<apex:panelGrid columnClasses="dataCol,valueCol" width="100%" columns="2" style="margin-top:1em;"> 

Feel free to experiment with the results.

  • I tried this <apex:panelGrid width="100%" columns="2" style="margin-top:1em;"> no change. I am willing to use anything else other than panelgrid. Just want those fields with a decent interface that atleast covers whole page.
    – Student
    Feb 7, 2019 at 2:48
  • nevermind I enclosed the panelgrid inside a div and set the div height to 530px.
    – Student
    Feb 7, 2019 at 3:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .