jquery - PrimeFaces p :inputText and p:inputTextarea rendering too wide in a p:panelGrid form

我注意到在我们的表单上，输入字段 p:inputText 和 p:inputTextarea 与其他小部件相比呈现得太宽了，例如p:select* 或 p:commandButton 。我们的表单被 p:panelGrid 包围。

这是一个测试页面:

<?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>

在 Firefox 上看起来是这样的:

在 IE 9(IE 8 模式)上看起来像这样:

对于百分比宽度 <p:inputText style="width: 100%;" /> ，组件渲染得稍微过宽。这似乎同样适用于绝对宽度 <p:inputText style="width: 300px;" /> 。

我发现，PrimeFaces CSS 附带

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

，其中去除填充会产生正确的宽度。但是，填充用于输入的文本插入。覆盖 CSS 选择器并没有真正起作用。

Qs :

你如何修复 p:inputText 和 p:inputText ？你如何最好地适应这种情况？使用自定义 PrimeFaces 渲染器？

附录:

我查看了来源，但找不到可以更改的地方(InputRenderer 类？)。任何关于在哪里看的提示都表示赞赏(在评论中!)。

请注意， p:calendar 组件似乎显示了正确的大小(但仅适用于百分比宽度)。 PrimeFaces 似乎在这里有问题。

最佳答案

这是正常的行为，您已经找到原因了。由于您选择的主题中的填充。

这样你就可以:

正确调整组件的宽度。 inputText 使用 296px 或 selectOneMenu 使用 304px 或任何适合您需要的东西

覆盖给定部分的 css 样式。只需找出如何在给定上下文中覆盖给定类的样式即可。

最佳解决方案，因为您有特定需求: 根据当前主题(PrimeFaces 文档第 7 节)编写您自己的主题 。

关于jquery - PrimeFaces p :inputText and p:inputTextarea rendering too wide in a p:panelGrid form，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14268059/

inputtext

jquery - PrimeFaces p :inputText and p:inputTextarea rendering too wide in a p:panelGrid form