2

I am displaying inputFields in a pageBlockSection. Input fields do not seem to be aligned properly. I see fields of different sizes. They are only left aligned. Right side is varying. How to align them properly.

<apex:pageBlockSection title="Defect Information" columns="2">
                <apex:inputField label="Defect " value="{!Defects__c.Name}"/>
                <apex:inputField label="Status" value="{!Defects__c.Status__c}"/>

</apex:pageBlockSection>
Improve this question
1
  • I suggest to share your code or part of the code that is relevant then someone can point out a mistake if there is in the code ...
    – VarunC
    Commented Mar 1, 2015 at 11:24

2 Answers 2

Reset to default
1

What you are doing very localy with the style attribute could also be done by settings in a CSS file or in a style tag for all the input, select and textarea controls.

The stanard CSS setting the width of input fields is in my experience one of the most disappointing design flaws of the Aloha UI. Not only the different sizes look ugly but the waste of screen real estate and a way to smal width lead to a very poor usability.

At the same time it's very easy to improve it by setting the width to a % value close to 100%. The 85% you have choosen make some things easier for markup composites like lookups and in inlineedit mode.

With some more effort in CSS fixing you can reach a 100% fluid design for nearly everything, including inlineedit mode

enter image description here enter image description here

Some more thoughts on this here Why do we still need to hack the Sidebar? Usecases - Workarounds - Alternatives

In another project I made even the multiselect picklist 100% fluid. Was a bit harder but users love it.

Mind that salesforce doesn't support this kind of CSS hacks and it might break in future versions of salesforce.

Improve this answer
0

I added some css like this to control the width :

<apex:inputField label="Status" value="{!Defects__c.Status__c}" style="width:85%;"/>
Improve this answer
1
  • This is not an answer to the question. If you are trying to add clarification to your original question, please edit the question itself
    – Eric
    Commented Mar 1, 2015 at 16:49

You must log in to answer this question.

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