0

I have the following visualforce code:

<apex:page id="communitiesSelfRegPage" showHeader="true" 
standardStylesheets="true" controller="CommunitiesSelfRegController" title=" 
{!$Label.site.user_registration}">
<apex:define name="body">   
<style>
  .valueCol input { display: inline-block; width: 100% }
</style>

<center>      
<apex:form id="theForm" forceSSL="true">
    <div style="height:530px">
    <!--<apex:pageBlock>-->
                <apex:pageMessages id="error"/>
                <apex:panelGrid columns="2" style="margin-top:2em;"> 
                  <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}"/>

                  <br></br>

                  <apex:outputText value=""/>
                  <apex:commandButton action="{!registerUser}" value="{!$Label.site.submit}" id="submit"/>
                </apex:panelGrid> 
              <br/>
     </div>
    <!--</apex:pageBlock> -->
 </apex:form>
 </center>

   <br/>
  </apex:define> 

The output of the code is as follows: enter image description here

How do I add line break after each input field such that the fields cover up the whole page and look more aesthetically pleasing.

0

Try the cellpadding attribute in apex:panelgrid tag

    <apex:panelGrid cellpadding="10px" columns="2" width="100%">
        <apex:outputLabel>test</apex:outputLabel><apex:inputText id="i1"/>
        <apex:outputLabel>test</apex:outputLabel><apex:inputText id="i2"/>
        <apex:outputLabel>test</apex:outputLabel><apex:inputText id="i3"/>
    </apex:panelGrid>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.