Как управлять шириной входного поля вершины в VisualForce Page

Question

Поскольку стандартные макеты страниц не позволяют вам настроить ширину поля ввода, привязанного к текстовому полю, я пытаюсь создать страницу VisualForce, но там не является атрибутом width для компонента apex: inputfield. Я думаю, мне придется использовать стили или CSS или что-то еще, но я не знаю, как это сделать.

Что нужно сделать, чтобы отрегулировать ширину поля ввода текста?

Просьба предоставить инструкции, используя веб-интерфейс (не Force.com IDE). Благодарю.

EDIT

Я закончил с использованием встроенного стиля, как этот

<apex:inputfield value="{!Country__c.Full_Name__c}" style="width:400px"/> 

Answer 1

Вы должны быть в состоянии сделать это с помощью CSS. Почти все теги Visualforce имеют атрибут styleClass, который является именем класса CSS для использования, то есть:

<apex:inputText styleClass="myClass" ... /> 

Becomes:

<input type="text" class="myClass" ... /> 

Таким образом, используя это, вы могли бы указать ширину используя CSS в верхней части страницы. Вот полный пример страницы с помощью стандартного Контакт контроллера (не хороший форматирования, хотя!):

<apex:page standardController="Contact"> 
    <style type="text/css"> 
     .myClass { width: 400px; } 
    </style> 

    <apex:form > 
     <apex:outputLabel for="firstName" value="First Name"/> 
     <apex:inputText styleClass="myClass" id="firstName" value="{!Contact.FirstName}"/> 
    </apex:form> 
</apex:page> 

Это работает для <apex:inputField>, а также, хотя и с осторожностью, что может произойти с различными типами полей. Чтобы быть более точным с помощью CSS вы можете сделать это (CSS 3 только!):

input[type="text"].myClass = { width: 400px; }