如何控制 VisualForce 页面中顶点输入字段的宽度答案

【问题标题】：How to control the width of an apex inputfield in a VisualForce Page如何控制 VisualForce 页面中顶点输入字段的宽度
【发布时间】：2012-01-19 02:17:44
【问题描述】：

由于标准页面布局不允许您调整绑定到文本字段的输入字段的宽度，我正在尝试创建一个 VisualForce 页面，但 apex:inputfield 组件没有宽度属性。我想我将不得不使用样式或 CSS 或其他东西，但我不知道如何。

如何调整文本输入框的宽度？

请使用网络界面（不是 Force.com IDE）提供说明。谢谢。

编辑

我最终使用了这样的嵌入式样式

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

【问题讨论】：

只要它对你有用，然后使用它，但要注意，当你最终有很多内联样式时，维护会变得很痛苦！

标签： salesforce apex-code visualforce force.com

【解决方案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; }

【讨论】：

不用担心，很高兴为您提供帮助！