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

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

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

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

ИЗМЕНИТЬ

В итоге я использовал такой встроенный стиль

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

salesforce apex-code visualforce force.com
person Sam    schedule 19.01.2012    source источник
comment
Пока это работает для вас, используйте его, но имейте в виду, что когда у вас будет много встроенных стилей, обслуживание может стать болезненным!   -  person Matt Lacey    schedule 19.01.2012

Ответы (1)


arrow_upward
11
arrow_downward

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

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

Становится:

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

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

<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; }
person Matt Lacey    schedule 19.01.2012
comment
Не беспокойтесь, рад помочь! - person Matt Lacey; 19.01.2012