3

I have a visualforce page that is using rerender to display fields depending on a picklist value.

The problem I have is that the allignment and styling has been lost. I have read that you need to wrap the outlout label and input field within a pageblockSectionItem which ive done, but had no luck.

Thanks

enter image description here

<apex:pageBlockSectionItem >
    <apex:outputLabel value="Category Detail" for="RegPickList" />  
    <apex:actionRegion >
        <apex:inputField value="{!case.Category_Detail_IT_Help_Desk__c}" required="true">
               <apex:actionSupport event="onchange" reRender="rerenderLabelChange, RegPickList HardwareAsset, OtherSoftware" />  
        </apex:inputField> 
    </apex:actionRegion>
</apex:pageBlockSectionItem> 
<apex:pageBlockSectionItem > 
</apex:pageBlockSectionItem> 

<apex:outputPanel id="rerenderLabelChange" >
    <apex:pageBlockSectionItem rendered="{!case.Category_Detail_IT_Help_Desk__c == 'Laptop'}"> 
      <apex:outputLabel value="Hardware Asset" for="HardwareAsset"/>
      <apex:inputField value="{!case.Hardware_Asset__c}" label="Hardware Asset"  id="HardwareAsset"/> 
    </apex:pageBlockSectionItem> 
    <apex:pageBlockSectionItem rendered="{!case.Category_Detail_IT_Help_Desk__c != 'Laptop'}"> 
    </apex:pageBlockSectionItem> 

    <apex:pageBlockSectionItem rendered="{!case.Category_Detail_IT_Help_Desk__c == 'Other Software'}"> 
      <apex:outputLabel value="Hardware Asset" for="OtherSoftware" />   
        <apex:inputField value="{!case.Other_Software__c}" label="Other Software"  id="OtherSoftware"/> 
    </apex:pageBlockSectionItem> 
    <apex:pageBlockSectionItem rendered="{!case.Category_Detail_IT_Help_Desk__c != 'Other Software'}"> 
    </apex:pageBlockSectionItem>           
</apex:outputPanel>
Improve this question

1 Answer 1

Reset to default
4

A likely cause of the problem is that you have introduced this:

<apex:outputPanel id="rerenderLabelChange">

which generates a <span> tag in the HTML which breaks the styling.

You can stop anything being output in the HTML by using:

<apex:outputPanel layout="none" id="rerenderLabelChange">

but I have vague memories of that not working either. If it doesn't work, I suggest you re-render the whole apex:pageBlockSection and thereby avoid needing any apex:outputPanel.

Improve this answer
2
  • 1
    Thanks for the reply, that had no unfortunately. Looks like im going to have re-reder the pageblock section, however this will cancel the fields that where populated. Thanks.
    – Andrew Hoban
    Commented Mar 18, 2016 at 13:37
  • @AndrewHoban Re-render should preserve the other fields as long as they are bound to fields that are part of the controller's view state (i.e. normal non-transient and non-static properties).
    – Keith C
    Commented Mar 18, 2016 at 14:11

You must log in to answer this question.

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