+ Start a Discussion
Chris LitesChris Lites 

inputField and outputField alignment help needed

Hi,

I am having a bit of an issue on an inline VF page that I am making that I was hoping someone might have some ideas on how to solve. Basically, I have some fields that are conditionally rendered as either input or output fields. These fields are contained within pageBlockSectionItem tags (so that I could bring in the help text), within pageBlockSection tags, inside column tags, in a pageBlockTable. My issue is that the outputFields seem to always display center justified but the input fields display more like they are left justified which I prefer.

I have tried playing with column widths, adding css either inline or in style tags, etc. but cannot seem to get these to behave the way I would like. It should also be mentioned that I did have showheader="false" sidebar="false" in the page tag previously but that made the help bubbles go away so that is not an option. Any thoughts would be greatly appreciated. Page code and picture examples are below. Let me know if you would like me to post up the controller code as well but I thought it was most likely unnecessary.
 
 
before edit pressed

after edit pressed
 
<apex:page standardController="Opportunity" extensions="OppCompetitorInsertController" >
 <apex:form >
 
 
  <!--  
   <apex:actionFunction action="{!methodOne}" name="methodOneInJavascript" >
		<apex:param name="firstParam" assignTo="{!testId}" value="" />
   </apex:actionFunction>
	-->
   <style>
	.outputAlign
	{
		text-align:left;
		align:left;
	}
	</style>
 
   <apex:pageBlock title="Add Competitors">
   <apex:pageMessages />
   
					
      <apex:pageBlockTable value="{!wrappers}" var="wrapper" id="wtable" width="95%" columnClasses="outputAlign">
         
         
         <apex:column width="23px" style="background-color: {!wrapper.backgroundColor};" >
         <apex:pageBlockSection >
        
        
        <apex:pageBlockSectionItem helpText="{!$ObjectType.Opportunity_Competitor__c.Fields.Primary__c.inlineHelpText}">
         	<apex:outputLabel value="Primary: " for="primaryFieldId" style="font-weight: bold"/>
         	<apex:inputField value="{!wrapper.oppComp.Primary__c}" id="primaryFieldId" rendered="{!wrapper.editable}"/>
         </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem helpText="{!$ObjectType.Opportunity_Competitor__c.Fields.Primary__c.inlineHelpText}">
         	<apex:outputField value="{!wrapper.oppComp.Primary__c}" id="primaryFieldId" rendered="{!NOT(wrapper.editable)}" style="padding-right: 100px;" styleClass="outputAlign"/>
         </apex:pageBlockSectionItem>
        
        </apex:pageBlockSection>
         </apex:column>
         
         
         
         <apex:column width="180px" style="background-color: {!wrapper.backgroundColor};">
         <apex:pageBlockSection >
        
        
        <apex:pageBlockSectionItem helpText="{!$ObjectType.Opportunity_Competitor__c.Fields.Competitor__c.inlineHelpText}">
         	<apex:outputLabel value="Competitor: " for="competitorFieldId" style="font-weight: bold"/>
         	<apex:inputField value="{!wrapper.oppComp.Competitor__c}" style="height:20px; width:100px" id="competitorFieldId" rendered="{!wrapper.editable}"/>
         </apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem helpText="{!$ObjectType.Opportunity_Competitor__c.Fields.Competitor__c.inlineHelpText}">
         	<apex:outputField value="{!wrapper.oppComp.Competitor__c}" style="height:20px; width:50px; align:left" id="competitorFieldId" rendered="{!NOT(wrapper.editable)}"/>
         </apex:pageBlockSectionItem>
         
        </apex:pageBlockSection>
         </apex:column>
         
         
        
        
         <apex:column width="43px" style="background-color: {!wrapper.backgroundColor};">
          <apex:pageBlockSection >
        
        
        <apex:pageBlockSectionItem helpText="{!$ObjectType.Opportunity_Competitor__c.Fields.Relationship__c.inlineHelpText}">
         	<apex:outputLabel value="Relationship: " for="relationshipFieldId" style="font-weight: bold"/>
         	<apex:inputField value="{!wrapper.oppComp.Relationship__c}" id="relationshipFieldId" rendered="{!wrapper.editable}"/>
         </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem helpText="{!$ObjectType.Opportunity_Competitor__c.Fields.Relationship__c.inlineHelpText}" >
         	<apex:outputField value="{!wrapper.oppComp.Relationship__c}" id="relationshipFieldId2" rendered="{!NOT(wrapper.editable)}"/>
         </apex:pageBlockSectionItem>
        
        </apex:pageBlockSection>
         </apex:column>
         
         
         
        
         <apex:column width="105px" style="background-color: {!wrapper.backgroundColor};">
          <apex:pageBlockSection >
        
        
        <apex:pageBlockSectionItem helpText="{!$ObjectType.Opportunity_Competitor__c.Fields.Competitor_Details__c.inlineHelpText}">
         	<apex:outputLabel value="Competitor Details: " for="compDetailsFieldId" style="font-weight: bold"/>
         	<apex:inputField value="{!wrapper.oppComp.Competitor_Details__c}" style="height:20px; width:300px" id="compDetailsFieldId" rendered="{!wrapper.editable}"/>
         </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem helpText="{!$ObjectType.Opportunity_Competitor__c.Fields.Competitor_Details__c.inlineHelpText}">
         	<apex:outputField value="{!wrapper.oppComp.Competitor_Details__c}" style="height:20px; width:300px" id="compDetailsFieldId2" rendered="{!NOT(wrapper.editable)}"/>
         </apex:pageBlockSectionItem>
        
        </apex:pageBlockSection>
         </apex:column>
         
         
         <apex:column width="14px" style="background-color: {!wrapper.backgroundColor};">
         <apex:pageBlockSection >
         
         
        <apex:pageBlockSectionItem >
         	<apex:commandButton value="Edit" action="{!edit}" immediate="true" rerender="wtable" style="width:50px" >
            	<apex:param name="toDelIdent" value="{!wrapper.ident}" assignTo="{!toEditIdent}"/>
            </apex:commandButton>
        </apex:pageBlockSectionItem>
        
        <apex:pageBlockSectionItem >
         	<apex:commandButton value="Cancel" action="{!cancel}" immediate="true" rerender="wtable" style="width:50px" >
            	<apex:param name="toCancelIdent" value="{!wrapper.ident}" assignTo="{!toCancelIdent}"/>
            </apex:commandButton>
        </apex:pageBlockSectionItem>
        
        </apex:pageBlockSection>
        </apex:column>
        
        <apex:column width="14px" style="background-color: {!wrapper.backgroundColor};">
        <apex:pageBlockSection >
        
        <apex:pageBlockSectionItem >
         	<apex:commandButton value="Delete" action="{!delWrapper}" immediate="true" rerender="wtable" style="width:50px">
            	<apex:param name="toDelIdent" value="{!wrapper.ident}" assignTo="{!toDelIdent}"/>
            	<apex:param name="beingDelTrue" value="true" assignTo="{!wrapper.beingDeleted}"/>
            </apex:commandButton>
        </apex:pageBlockSectionItem>
        
        
        </apex:pageBlockSection>
         </apex:column>
         
         
        
         
      </apex:pageBlockTable>
      <apex:commandButton value="Add Row" action="{!addRows}" rerender="wtable">
         <apex:param name="addCount" value="1" assignTo="{!addCount}"/>
      </apex:commandButton>
      <apex:commandButton value="Save All" action="{!save}" rerender="wtable">
      </apex:commandButton>
   </apex:pageBlock>
 </apex:form>
</apex:page>

 
Best Answer chosen by Chris Lites
Chris LitesChris Lites
if it is useful to anyone, I figured out what my issue was. I was conditionally rendering the fields rather than the pageBlockSectionItem containers that they were in so the fields would get bumped over because the pageBlockSectionItem was still holding the space there. when I changed the rendered attribute on the pageBlockSectionItem itself, the issue went away.