You need to sign in to do that
Don't have an account?
JPSeabury
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>
All Answers
Works like a charm! I needed to shorten some text input fields as they were causing excessive horizontal scroll.
Thanks for posting.
Were you able to change the sectionHeader image. Can you help me to do the same.