So i have these Input fields that are conditionally rendered but they do not align with the other input fields.

enter image description here

Code for Deal Scenario:

<apex:inputField value="{!oppobj.Deal_Scenario_CSA__c}" required="true"  onchange="return ChangeDealScenario('{!$Component.scenario}')" id="scenario" rendered="{!(ordertypecur !='CMR') && oppobj.Product__c !='Margin Escalator' && oppobj.Product__c !='Materials OM Growth' }"/>

To compare to, here is the code for the Op Plan button

<apex:inputField value="{!oppobj.Op_Plan__c}"/>

So the code above shows Deal Scenario. The input box is not aligned with the others and I'm not sure why. Some of the other input boxes are also conditionally rendered. If I add div tag to align the same result happens. It just doesn't align with the other boxes. Any help appreciated.

  • I think it would help if you included a larger sample of you VisualForce markup for better context. – John Thompson Aug 10 '17 at 13:37

The problem isn't the code you've posted, but the surrounding code. apex:inputField should ideally be a direct child of apex:pageBlockSection in order to render correctly. You might need to use an apex:pageBlockSectionItem to help realign the elements. Use of "rendered", "required", "onchange", etc should not affect the alignment.


First glance at this sounds like it might be a CSS issue.

Personally, I would start by using an "inspect" tool that can show you the CSS currently applied to each of the elements, and that would give you a starting point, and maybe even the solution of applying a styleClass to all your inputFields to force continuity on whatever CSS element is different.

Your Answer

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