gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 10:18:56 25 4
gpt4 key购买 nike

我注意到在我们的表单上输入字段 p:inputTextp: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 上看起来像这样:

enter image description here

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

enter image description here

对于百分比宽度 <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:inputTextp: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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com