我注意到在我们的表单上输入字段 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 选择器并没有真正起作用。
问题:
如何修复 p:inputText
和 p:inputText
?你如何最好地适应这个?使用自定义 PrimeFaces 渲染器?
附录:
我查看了源代码,但找不到可以更改的地方(InputRenderer 类?)。任何关于在哪里查看的提示都将受到赞赏(在评论中!)。
请注意 p:calendar
组件似乎显示了正确的大小(但是仅适用于百分比宽度)。 PrimeFaces 似乎在这里有问题。
最佳答案
这是一种正常行为,您已经找到了原因。由于在您选择的主题中填充。
所以你可以:
- 适当调整组件的宽度。将 296px 用于 inputText 或 304px 用于 selectOneMenu 或任何适合您需要的东西
- 覆盖给定部分的 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/