You need to sign in to do that
Don't have an account?
John Braun
Visualforce - Field label font size
Hello all,
I was wondering if someone could help me with controlling the font size of field labels in visualforce. Please see the below example of a picklist field I have in Visualforce, I'd like to increase the font size of the label. In my example below, I would be interested in increasing the font size of the label:
"1. How important was it to choose a vendor that could take your product through development to commercialization?"
Any help/direction is greatly appreciated, thank you!:
<apex:selectList value="{!Customer_Survey__c.Question_1__c}" multiselect="false" size="1"
label="1. How important was it to choose a vendor that could take your product through development to commercialization?">
<apex:selectOption itemValue="--Select Option--" itemLabel="--Select Option--"/>
<apex:selectOption itemValue="Not at all" itemLabel="1-Not at all"/>
<apex:selectOption itemValue="Somewhat" itemLabel="2-Somewhat"/>
<apex:selectOption itemValue="Average" itemLabel="3-Average"/>
<apex:selectOption itemValue="High" itemLabel="4-High"/>
<apex:selectOption itemValue="Critical" itemLabel="5-Critical"/>
<apex:selectOption itemValue="N/A" itemLabel="Not Applicable"/>
</apex:selectList>
I was wondering if someone could help me with controlling the font size of field labels in visualforce. Please see the below example of a picklist field I have in Visualforce, I'd like to increase the font size of the label. In my example below, I would be interested in increasing the font size of the label:
"1. How important was it to choose a vendor that could take your product through development to commercialization?"
Any help/direction is greatly appreciated, thank you!:
<apex:selectList value="{!Customer_Survey__c.Question_1__c}" multiselect="false" size="1"
label="1. How important was it to choose a vendor that could take your product through development to commercialization?">
<apex:selectOption itemValue="--Select Option--" itemLabel="--Select Option--"/>
<apex:selectOption itemValue="Not at all" itemLabel="1-Not at all"/>
<apex:selectOption itemValue="Somewhat" itemLabel="2-Somewhat"/>
<apex:selectOption itemValue="Average" itemLabel="3-Average"/>
<apex:selectOption itemValue="High" itemLabel="4-High"/>
<apex:selectOption itemValue="Critical" itemLabel="5-Critical"/>
<apex:selectOption itemValue="N/A" itemLabel="Not Applicable"/>
</apex:selectList>
Thank you for the response -
Would you mind showing me where i would place "font-size: 30px;" within the code example I posted? The objective is to make the label of the picklist larger, not the selectable options, thanks!
< apex:outputlabel value="How important was it to choose a vendor that could take your product through development to commercialization?" style="font-size: 30px;"> and then your selectlist like:
<apex:selectList value="{!Customer_Survey__c.Question_1__c}" multiselect="false" size="1" >
Thank you very much for your help, I believe I'm getting somewhere. A problem now seems to be that my selectable options are no longer uniform now that I've made the update to the code.
In the example below I've updated 2 of the questions in my survey with the suggestion you provided above. I left the other questions alone for comparison. Is there a way to still ensure the selectable option values line up the same?
Result:
See my code below - I'm providing the modified version based on Kavikant's suggestion, along with examples of unmodified fields:
<apex:pageBlockSection title="Questions" columns="2">
<apex:outputlabel value="1. How important was it to choose a vendor that could take your product through development to commercialization?" style="font-size: 13px;">
<apex:selectList value="{!Customer_Survey__c.Question_1__c}" multiselect="false" size="1"
label="1. How important was it to choose a vendor that could take your product through development to commercialization?">
<apex:selectOption itemValue="--Select Option--" itemLabel="--Select Option--"/>
<apex:selectOption itemValue="Not at all" itemLabel="1-Not at all"/>
<apex:selectOption itemValue="Somewhat" itemLabel="2-Somewhat"/>
<apex:selectOption itemValue="Average" itemLabel="3-Average"/>
<apex:selectOption itemValue="High" itemLabel="4-High"/>
<apex:selectOption itemValue="Critical" itemLabel="5-Critical"/>
<apex:selectOption itemValue="N/A" itemLabel="Not Applicable"/>
</apex:selectList>
</apex:outputlabel>
<apex:outputlabel value="7. How large a factor was facility location in making your final decision?" style="font-size: 13px;">
<apex:selectList value="{!Customer_Survey__c.Question_7__c}" multiselect="false" size="1"
label="7. How large a factor was facility location in making your final decision?">
<apex:selectOption itemValue="--Select Option--" itemLabel="--Select Option--"/>
<apex:selectOption itemValue="Not at all" itemLabel="1-Not at all"/>
<apex:selectOption itemValue="Somewhat" itemLabel="2-Somewhat"/>
<apex:selectOption itemValue="Average" itemLabel="3-Average"/>
<apex:selectOption itemValue="High" itemLabel="4-High"/>
<apex:selectOption itemValue="Critical" itemLabel="5-Critical"/>
<apex:selectOption itemValue="N/A" itemLabel="Not Applicable"/>
</apex:selectList>
</apex:outputlabel>
<apex:selectList value="{!Customer_Survey__c.Question_2__c}" multiselect="false" size="1"
label="2. Please rate how your prior experience working with Patheon in the past was an important factor in your decision, if applicable?">
<apex:selectOption itemValue="--Select Option--" itemLabel="--Select Option--"/>
<apex:selectOption itemValue="Not at all" itemLabel="1-Not at all"/>
<apex:selectOption itemValue="Somewhat" itemLabel="2-Somewhat"/>
<apex:selectOption itemValue="Average" itemLabel="3-Average"/>
<apex:selectOption itemValue="High" itemLabel="4-High"/>
<apex:selectOption itemValue="Critical" itemLabel="5-Critical"/>
<apex:selectOption itemValue="N/A" itemLabel="Not Applicable"/>
</apex:selectList>
<apex:selectList value="{!Customer_Survey__c.Question_8__c}" multiselect="false" size="1"
label="8. How important was the site qualification/technical visit in your vendor selection?">
<apex:selectOption itemValue="--Select Option--" itemLabel="--Select Option--"/>
<apex:selectOption itemValue="Not at all" itemLabel="1-Not at all"/>
<apex:selectOption itemValue="Somewhat" itemLabel="2-Somewhat"/>
<apex:selectOption itemValue="Average" itemLabel="3-Average"/>
<apex:selectOption itemValue="High" itemLabel="4-High"/>
<apex:selectOption itemValue="Critical" itemLabel="5-Critical"/>
<apex:selectOption itemValue="N/A" itemLabel="Not Applicable"/>
</apex:selectList>
As for your suggestion, I did the following -
I'm not sure what to pull out to reference.
Again thank you so much for your help!!
You and set style according to me as style="font-size: 11px", please select best answer if it solve your problem.