Make outputpanel have same style as rest of page.

I have an immensely complicated VF page, with some special behavior in one section. To get the special behavior to work, I had to litter the layout with outputpanels and actionregions (thanks to Henk Henk for his help with that). Now it behaves correctly, but the active section has crap formatting - captions won't right justify, data fields won't line up with the rest of the form.

I've tried class and styleclass and labelstyleclass and datastyleclass and inserting spans and divs and ths - nothing will fix the formatting. I don't dare touch the outputpanels themselves because the behavior will stop working. Here's a portion of the page:

<apex:page showHeader="true" sidebar="true" standardController="TrialSubscription__c" extensions="NewWithTrial">
<apex:form id="TheForm">
<apex:actionFunction name="ChangeCloud" action="{!changeCloud}" rerender="CloudSection" status="cloudChangeStatus" />
<apex:actionFunction name="ChangeProduct" action="{!changeProduct}" rerender="ProductSection, ConferencingSection, StorageSection, CallingSection" status="productChangeStatus" />
<apex:actionFunction name="ChangeCalling" action="{!changeCalling}" rerender="CallingSection" status="callingChangeStatus" />
<apex:actionfunction name="ChangeGenerate" action="{!changeGenerate}" rerender="ForcePasswordChange, EnterPassword" status="generateChangeStatus" />
<apex:pageBlock mode="edit">
<apex:pageBlockSection columns="2" title="Lead Information">
<apex:inputField value="{!theLead.FirstName}" required="true" />
<apex:inputField value="{!theLead.Phone}" required="true" />
<apex:inputField value="{!theLead.LastName}" required="true" />
<apex:inputField value="{!theLead.Email}" required="true" />
<apex:inputField value="{!theLead.Company}" required="true" />
<apex:inputField value="{!theLead.LeadSource}" />
<apex:inputField value="{!theLead.Street}" />
<apex:inputField value="{!theLead.nefsis_IP__c}" />
<apex:inputField value="{!theLead.City}" />
<apex:outputText value=" " />
<apex:inputField value="{!theLead.State}" />
<apex:outputText value=" " />
<apex:inputField value="{!theLead.PostalCode}" />
<apex:outputText value=" " />
<apex:inputField value="{!theLead.Country}" required="true" />
</apex:pageBlockSection>
.
.
.
<apex:pageblockSection id="LicenseSection" columns="2" title="License Information">
<apex:outputField value="{!theTrial.License_Status__c}" />
<apex:outputtext value=" " />
<apex:outputField value="{!theTrial.Starts__c}" />
<apex:inputField value="{!theTrial.Expires__c}" required="true" />
<apex:pageblockSectionItem >
<apex:outputLabel for="comment" value="Comment in XXXXXXX" />
<apex:inputText id="comment" value="{!comment}" style="width:100%" />
</apex:pageblockSectionItem>
</apex:pageblockSection>
<apex:actionregion >
<apex:pageblocksection columns="2" id="SecuritySection" title="Security Information">
<apex:outputpanel >
<apex:pageblocksectionitem >
<apex:outputlabel for="generate" value="Generate random password" styleClass="labelCol vfLabelColTextWrap first" />
<apex:inputcheckbox id="generate" value="{!generatePassword}" styleClass="dataCol first">
<apex:actionsupport event="onclick" action="{!changeGenerate}" rerender="ForcePasswordChange, EnterPassword" status="generateChangeStatus" />
<apex:actionsupport event="onClick" action="{!changeGenerate}" rerender="ForcePasswordChange, EnterPassword" status="generateChangeStatus" />
<apex:actionsupport event="onchange" action="{!changeGenerate}" rerender="ForcePasswordChange, EnterPassword" status="generateChangeStatus" />
<apex:actionsupport event="onChange" action="{!changeGenerate}" rerender="ForcePasswordChange, EnterPassword" status="generateChangeStatus" />
</apex:inputcheckbox>
</apex:pageblocksectionitem>
</apex:outputpanel>
<apex:outputpanel id="ForcePasswordChange" >
<apex:pageblocksectionitem >
<apex:outputlabel for="forcechangepassword" value="Must change password on first login" styleclass="labelCol vfLabelColTextWrap first" />
<apex:inputcheckbox id="forcechangepassword" value="{!forceChangePassword}" styleclass="dataCol first" />
</apex:pageblocksectionitem>
</apex:outputpanel>
<apex:outputpanel id="EnterPassword" >
<apex:outputpanel id="renderPasswordField" rendered="{!NOT(generatePassword)}" >
<apex:pageblocksectionitem >
<apex:outputlabel for="password" value="Use this password" styleclass="labelCol vfLabelColTextWrap last" />
<apex:inputsecret id="password" value="{!password}" styleclass="dataCol last" />
</apex:pageblocksectionitem>
</apex:outputpanel>
</apex:outputpanel>
<apex:actionstatus id="generateChangeStatus" starttext="Changing security options..." stoptext="" />
</apex:pageblocksection>
</apex:actionregion>
<apex:pageBlockButtons location="bottom">
<apex:commandButton value="Create" action="{!save}"/>
<apex:commandButton value="Cancel" action="{!cancel}"/>
</apex:pageBlockButtons>
</apex:pageBlock>
<apex:pagemessages ></apex:pagemessages>
</apex:form>
</apex:page>

Here's the special behavior function from the controller:

   public PageReference changeGenerate() {
       forceChangePassword = generatePassword;
       return null;
   }

With these tags in it, it finally used the right font, but the labels and fields are still not lined up with the rest of the form, and I've run out of things to try. Any ideas?

April 8, 2016
·
Like
0
·
Follow
2

Best Answer chosen by Mike Summitt

Mike Summitt
Since the time I posted this question, I've been able to reduce the number of outputpanels and other panels while preserving the functionality. This eventually corrected the style anomalies that I was experiencing. Thanks, pcon, for your help.

June 10, 2016
·
Like
0
·
Dislike
0

pcon
You can always for the CSS by putting in a styleClass attribute, and then modifying the CSS to fix the issue. It's likely an issue of having it nested incorrectly but like you said you don't want to touch order or the outputPanels, so that is your best option.