Как контролировать ширину поля ввода апекса на странице VisualForce

Question

Поскольку стандартные макеты страниц не позволяют настраивать ширину поля ввода, привязанного к текстовому полю, я пытаюсь создать страницу VisualForce, но для компонента apex: inputfield отсутствует атрибут width. Я думаю, что мне придется использовать стили или 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" ... />

становится:

<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; }