0

I am styling <apex:> tags with CSS but can't seem to align the inputFields correctly as they won't respond to padding, float:, or margin:.

enter image description here

VF Snippet

<!-- Form starts -->
<apex:pageBlockSection title="Recipient Information" columns="2" id="recipient">
    <apex:outputLabel value="First Name" styleClass="inputLabel">
        <apex:inputField value="{!rec.Name}" styleClass="inputField"/>
    </apex:outputLabel>

CSS

.inputField {
    
    box-sizing: border-box;
    padding: 7px;
    border-radius: 5px;
    border-color: grey;
    width: 300px;
}

.inputLabel {
    font-family: Salesforce Sans Regular;
    display: inline;
    float: left;
    margin-bottom: 8px;
    margin-right: 7px;
}
Improve this question

1 Answer 1

Reset to default
0

You don't need <apex:outputLabel>. <apex:inputField> automatically renders a label for you. If you need to override the label, you can use the label property on the <apex:inputField />.

Improve this answer
2
  • Yes but when overriding the CSS of the inputField with styleClass the label disappears... besides that I cannot seem to align the inputFields
    – SpicyPat
    Commented Feb 22, 2021 at 16:24
  • @SpicyPat You can also use apex:pageBlockSectionItem to force two columns. This may help.
    – sfdcfox ♦
    Commented Feb 22, 2021 at 17:39

You must log in to answer this question.

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