0

I have a simple VF form to register an enquiry. The only extra functionality I have in the form is an email checker.

The inputText field by itself falls in line with the form fields above it, but as soon as I add the commandButton it seems to mess up the alignment completely. I have tried a few things, using margin-left style attribute, putting the button in a div and outputPanel - I have not been able to resolve it so far.

If anyone could help it would be very appreciated.

As you can see from the screenshot, the inputText box and commandButton are skewed to the left which looks horrible.

<apex:page controller="EnquiryForm2Controller" lightningStylesheets="true">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>    
    <apex:form id="theForm">
        <apex:pageblock title="Register an Enquiry" >
            <apex:pageMessages />
            <h3><font color="red">Please use the 'Check email' button so you do not create a duplicate contact.</font></h3>
            <apex:pageBlockSection title="What property are you interested in?">
                <apex:inputField value="{!ll.ListingForForm__c}" />                
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Contact Details" >
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="First Name"/>
                <apex:inputField value="{!Applicant.FirstName}" required="true"/>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem >
                <apex:outputLabel value="Last Name"/>
                <apex:inputField value="{!Applicant.LastName}"  required="true"/>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem >
                <apex:outputLabel value="Lead Source"/>
                <apex:inputField value="{!Applicant.LeadSource}"/>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem>
                    <apex:outputLabel value="Phone" />
                <apex:inputField value="{!Applicant.Phone}"/>
                </apex:pageBlockSectionItem>

             <apex:actionRegion renderRegionOnly="false"> 
                <apex:pageBlockSectionItem >
                <apex:outputLabel value="Email" for="email_input"/>                 
                <apex:inputText value="{!emailid}" required="true" id="email_input" />                      
                </apex:pageBlockSectionItem>
                 <apex:pageBlockSectionItem>
                 <apex:commandButton action="{!ValidateEmail}" value="Check email" reRender="theForm" />       
                 </apex:pageBlockSectionItem>                                  
                 </apex:actionRegion>
                                                                                                                                      
            </apex:pageBlockSection>
         </apex:pageblock>
    </apex:form> 
</apex:page>

2
  • did you consider using an onchange for the inputText and calling an actionFunction? This way you could eliminate the commandButton
    – cropredy
    Nov 15, 2021 at 1:17
  • Hi thanks for the response, I have considered this but I still need the apex:actionRegion so that it can check the inputted email while disregarding the required fields in the form Nov 15, 2021 at 10:24

1 Answer 1

0

The action region breaks certain kinds of constructs in Visualforce. How I've resolved this in the past is to include a new page block section:

         <apex:actionRegion renderRegionOnly="false"> 
            <apex:pageBlockSection>
            <apex:pageBlockSectionItem >
            <apex:outputLabel value="Email" for="email_input"/>                 
            <apex:inputText value="{!emailid}" required="true" id="email_input" />                      
            </apex:pageBlockSectionItem>
             <apex:pageBlockSectionItem>
             <apex:commandButton action="{!ValidateEmail}" value="Check email" reRender="theForm" />       
             </apex:pageBlockSectionItem>                                  
            </apex:pageBlockSection>
             </apex:actionRegion>
                                                                                                                                  

As long as you don't include a title or other attributes, it will act as if it is part of the section above it, and have correct formatting consistent with the rest of the page.

1
  • Ah that is annoying. Thanks for this, it looks better than before but it is still too far left and not in-line. Very odd. Nov 12, 2021 at 16:41

You must log in to answer this question.

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