+ Start a Discussion
JPSeaburyJPSeabury 

How can I change the width / height of an apex:inputField on a VisualForce page?

I'm writing a VisualForce wizard that collects a list of hardware items (RMA_Return__c) being returned by a customer.  In the VF page, I'd like to control the height and width of the Problem Description field.
 
Picture is worth a thousand words:
 
 
I want to reduce the size of the left InputField box, and increase the width and height of the second InputField box.
 
It looks like <apex:inputText> has a "size" attribute, so you can specify the width of the inputText box, but there isn't a similar attribute for the <apex:inputField> component.
 
There is a "style" attribute, but I'm don't know what CSS syntax would allow me to control this.
 
NOTE:  Still a work in progress, kindly excuse the code hacks here.
 
Current VisualForce Page:
 
Code:
<!-- Create RMA Wizard: Step 2 for Defect / ECO Recall / Shipment Error RMA types -->
<apex:page controller="newRmaController" tabStyle="RMA__c">
  <apex:sectionHeader title="New RMA" subtitle="Step 2 : Select Returning Hardware"/>
  <apex:form >
    <apex:pageBlock title="RMA Detail" mode="edit">
      <apex:pageBlockButtons >
        <apex:commandButton action="{!step1}" value="Previous"/>
        <apex:commandButton action="{!step2}" value="Next"/>
      </apex:pageBlockButtons>
      <apex:pageBlockSection title="RMA Information">
        <apex:inputField id="rmaType" value="{!Rma.Type__c}" required="TRUE"/>
        <apex:inputField id="caseNumber" value="{!Case.casenumber}" />
        <apex:inputField id="caseSwitch" value="{!Case.Switch__c}" required="TRUE"/>
        <apex:inputField id="caseAccount" value="{!Case.Accountid}" required="TRUE"/>
      </apex:pageBlockSection>

      <table width="100%"><tr valign="top">
         <td width="70%">
            <apex:pageBlockSection title="List All Returning Hardware and Reason for Return" columns="1">
               <apex:repeat value="{!RMA_Returns}" var="rtn">
                  <tr>
                     <td width="30%"> <apex:inputField value="{!rtn.SN__c}"/> </td>
                     <td witdh="70%"> <apex:inputField value="{!rtn.Problem_Description__c}"/> </td>
                  </tr>
               </apex:repeat>
               <apex:commandLink action="{!addReturn}" value="Add Card"/>
            </apex:pageBlockSection>
         </td>
         <td width="30%">
            <apex:pageBlockSection title="Installed HW as of Last SAT Audit" columns="1">
               <apex:dataTable id="c3HardwareList" value="{!c3HardwareList}" var="hw" bgcolor="#F3F3EC"
                styleClass="list" rowClasses="dataRow" onRowMouseOver="hiOn(this);" onRowMouseOut="hiOff(this);">
                  <apex:column >
                     <apex:facet name="header"><b>S/N</b></apex:facet>
                     <apex:outputLink value="/{!hw.id}">
                        {!hw.name}
                     </apex:outputLink>
                  </apex:column>
                  <apex:column >
                     <apex:facet name="header"><b>Product Code</b></apex:facet>
                        {!hw.Product_Code__c}
                  </apex:column>
               </apex:dataTable>
            </apex:pageBlockSection>
      </td></tr></table>
      <apex:pageBlockSection title="Ship-To Information : Verify with Customer for Accuracy" collapsible="TRUE" columns="2">
          <apex:inputField id="rmaContact" value="{!Switch.RMA_Contact__c}" />
          <apex:inputField id="rmaPhone" value="{!Switch.RMA_Phone__c}" />
          <apex:inputField id="rmaStreet" value="{!Switch.RMA_Street__c}" />
          <apex:inputField id="rmaCity" value="{!Switch.RMA_City__c}" />
          <apex:inputField id="rmaState" value="{!Switch.RMA_State_Region__c}" />
          <apex:inputField id="rmaZip" value="{!Switch.RMA_Zip_Code__c}" />
          <apex:inputField id="rmaCountry" value="{!Switch.RMA_Country__c}" />
      </apex:pageBlockSection>
    </apex:pageBlock>
    Help: http://forums.sforce.com/sforce/board/message—board.id=Visualforce&message.id=668
  </apex:form>
</apex:page>

 
Best Answer chosen by Admin (Salesforce Developers) 
JPSeaburyJPSeabury
Solution given to me by Twitter friend @jcasimiro who wrote:
 
@jpseabury Have you tried style="width: 300px; height: 100px" ? Width should work. Height might have different effects based on browser.
 
I hadn't, it worked great:
 
Revised code:
Code:
      <tr>
         <td> <apex:inputField value="{!rtn.SN__c}"/ style="width:100px"> </td>
         <td> <apex:inputField value="{!rtn.Problem_Description__c}" style="width: 360px; height: 40px"/> </td>
      </tr>

 

All Answers

JPSeaburyJPSeabury
Solution given to me by Twitter friend @jcasimiro who wrote:
 
@jpseabury Have you tried style="width: 300px; height: 100px" ? Width should work. Height might have different effects based on browser.
 
I hadn't, it worked great:
 
Revised code:
Code:
      <tr>
         <td> <apex:inputField value="{!rtn.SN__c}"/ style="width:100px"> </td>
         <td> <apex:inputField value="{!rtn.Problem_Description__c}" style="width: 360px; height: 40px"/> </td>
      </tr>

 
This was selected as the best answer
djrootdjroot

Works like a charm!  I needed to shorten some text input fields as they were causing excessive horizontal scroll. 

Thanks for posting.

SalesSweetySalesSweety

Were you able to change the sectionHeader  image. Can you help me to do the same.

Dinesh ChandraDinesh Chandra
Will it be possible to share controller code with me? I am having problem in creating a custom controller. I am new to Salesforce.
David Kingery 3David Kingery 3
style="width:100px;" doesn't seem to work at all for multi-picklist.  Mine are all trailing off the edge of the page.