PrimeFaces p：inputText和p：inputTextarea在ap：panelGrid表单中呈现得太宽

Question

I have noticed that on our forms the input fields p:inputText and p:inputTextarea are rendered too wide compared to other widgets, eg p:select* or p:commandButton . 我注意到在我们的表单上输入字段p:inputText和p:inputTextarea与其他小部件相比渲染得太宽，例如p:select*或p:commandButton 。 Our forms are enclosed by ap:panelGrid. 我们的表单由ap：panelGrid包围。

Here's a test page: 这是一个测试页面：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>
            D E B U G
        </title>
    </h:head>

    <h:body>

        <h:form>

            <p:panelGrid columns="2">

                <p:outputLabel value="ID:" />
                <p:inputText style="width: 100%;" />

                <h:outputText />
                <p:commandButton value="all = width: 100%" style="width: 100%;" />

                <p:outputLabel value="Status:" />
                <p:selectOneMenu style="width: 100%;">
                    <f:selectItem itemLabel="Status A" itemValue="1" />
                    <f:selectItem itemLabel="Status B" itemValue="2" />
                    <f:selectItem itemLabel="Status C" itemValue="3" />
                </p:selectOneMenu>

                <p:outputLabel value="Remarks:" />
                <p:inputTextarea rows="6" style="width: 100%;" />

            </p:panelGrid>

            <br />

            <p:panelGrid columns="2">

                <p:outputLabel value="ID:" />
                <p:inputText style="width: 300px;" />

                <h:outputText />
                <p:commandButton value="all = width: 300px" style="width: 300px;" />

                <p:outputLabel value="Status:" />
                <p:selectOneMenu style="width: 300px;">
                    <f:selectItem itemLabel="Status A" itemValue="1" />
                    <f:selectItem itemLabel="Status B" itemValue="2" />
                    <f:selectItem itemLabel="Status C" itemValue="3" />
                </p:selectOneMenu>

                <p:outputLabel value="Remarks:" />
                <p:inputTextarea rows="6" style="width: 300px;" />

            </p:panelGrid>
        </h:form>        

    </h:body>

</html>

It looks like this on Firefox: 在Firefox上看起来像这样：

在此输入图像描述

It looks like this on IE 9 (IE 8 mode): 在IE 9（IE 8模式）上看起来像这样：

在此输入图像描述

For the percentage widths <p:inputText style="width: 100%;" /> 对于百分比宽度<p:inputText style="width: 100%;" /> <p:inputText style="width: 100%;" /> , the components are rendered slightly too wide. <p:inputText style="width: 100%;" /> ，组件呈现得略宽。 The same seems to apply for the absolute widths <p:inputText style="width: 300px;" /> 同样似乎适用于绝对宽度<p:inputText style="width: 300px;" /> <p:inputText style="width: 300px;" /> . <p:inputText style="width: 300px;" /> 。

I found out, that the PrimeFaces CSS comes with 我发现PrimeFaces CSS附带了

.ui-inputfield {
    font-weight: normal;
    margin: 0;
    outline: medium none;
    padding: 4px;
}

, where removing the padding results in the correct width. ，删除填充导致正确的宽度。 However, the padding is meant for the text inset of the inputs. 但是，填充意味着输入的文本插入。 Overriding the CSS selector doesn't really work. 覆盖CSS选择器并不真正起作用。

Qs : Qs ：

How do you fix the p:inputText and p:inputText ? 你如何修复p:inputText和p:inputText ？ How do you best adjust for this? 你如何最好地适应这个？ Using a custom PrimeFaces renderer? 使用自定义PrimeFaces渲染器？

Addendum: 附录：

I looked into the sources, but I couldn't find the place where this could be changed (InputRenderer class?). 我查看了源代码，但我找不到可以更改的位置（InputRenderer类？）。 Any tips on where to look are appreciated (in a comment!). 任何关于在哪里看的提示都受到赞赏（在评论中！）。

Note that the p:calendar component seems to show the correct size (only for percentage widths however). 请注意， p:calendar组件似乎显示正确的大小（但仅适用于百分比宽度）。 PrimeFaces seems to have issues here. PrimeFaces似乎在这里有问题。

Answer 1

It's a normal behaviour, you've found out already why. 这是一种正常的行为，你已经发现了原因。 Because of padding in the theme you've choosen. 因为你选择的主题中有填充。

So you can: 所以你可以：

adapt the width of your components properly. 适当调整组件的宽度。 Use 296px for inputText or 304px for selectOneMenu or anything that fits your needs 对于selectOneMenu或任何符合您需求的东西，请使用296px作为inputText或304px
override the css style for given section. 覆盖给定部分的css样式。 Just find out how to override the style for given class in given context. 只需了解如何在给定的上下文中覆盖给定类的样式。
the best solution, because you have specific needs: Write your own theme based on current theme (PrimeFaces docu section 7). 最佳解决方案，因为您有特定需求：根据当前主题编写您自己的主题（PrimeFaces文档第7部分）。

Answer 2

You can override padding and other styles after primefaces stylesheet. 您可以在 primefaces样式表后覆盖填充和其他样式。 Usually this means inline / include stylesheet directly after <h:body>: 通常这意味着在<h：body>之后直接内联/包含样式表：

.ui-inputfield {
    padding: 0;
}

PrimeFaces p：inputText和p：inputTextarea在ap：panelGrid表单中呈现得太宽

问题描述

2 个解决方案

解决方案1
1 2013-01-11 10:06:44

解决方案2
0 2013-09-26 07:03:54

PrimeFaces p：inputText和p：inputTextarea在ap：panelGrid表单中呈现得太宽

问题描述

2 个解决方案

解决方案1 1 2013-01-11 10:06:44

解决方案2 0 2013-09-26 07:03:54

解决方案1
1 2013-01-11 10:06:44

解决方案2
0 2013-09-26 07:03:54