在 PrimeFaces 中使用 p:inplace答案

【问题标题】：Using p:inplace in PrimeFaces在 PrimeFaces 中使用 p:inplace
【发布时间】：2014-08-06 06:18:37
【问题描述】：

在 PrimeFaces (5.0) 中使用 <p:inplace> 时，当 <p:inplace> 与 <p:inputText> 一起使用时，保存和取消按钮的显示位置看起来很合适，但这些按钮看起来很难看，当<p:inplace> 与其他组件一起使用。

下面仅给出一些示例。

<p:inplace id="text" editor="true" label="Text">
    <p:inputText/>
</p:inplace>

<br/><br/><br/>

<p:inplace id="textArea" editor="true" label="TextArea">
    <p:inputTextarea/>
</p:inplace>

<br/><br/><br/>

<p:inplace id="list" editor="true" label="List">
    <p:selectOneMenu>
        <f:selectItem itemLabel="List Item 1"/>
        <f:selectItem itemLabel="List Item 2"/>
        <f:selectItem itemLabel="List Item 3"/>
    </p:selectOneMenu>
</p:inplace>

它显示了这些组件，如下图所示。

可以看出，除了<p:inputText>之外，按钮与其各自的组件没有正确对齐。

它们应该垂直显示在每个组件右侧的中间/中心（或至少完美的基线），就像在第一个示例中使用 <p:inputText> 所做的那样。

有没有办法自定义这种行为？

【问题讨论】：

标签： css jsf primefaces jsf-2.2

【解决方案1】：

你必须根据子组件进行调整。

在您的情况下，有三个组件，inputText inputTextArea 和 selectOneMenu，现在 inputText 和 inputTextArea 都有 ui-inputfield CSS 类，selectOneMenu 有 ui-selectonemenu 说你可以调整如下：

.ui-inplace .ui-selectonemenu, .ui-inplace .ui-inputfield {
   vertical-align: middle;
}

【讨论】：

【解决方案2】：

我不知道是否有更清洁的解决方案，但您可以使用 CSS 来修复按钮容器的定位，使用内联元素上的 styleClass 属性，如下所示：

XHTML：

<p:inplace id="list" styleClass="customInplaceListStyle" editor="true" label="List">
    <p:selectOneMenu>
         <f:selectItem itemLabel="List Item 1"/>
         <f:selectItem itemLabel="List Item 2"/>
         <f:selectItem itemLabel="List Item 3"/>
    </p:selectOneMenu>
</p:inplace>

CSS：

.customInplaceListStyle.ui-inplace .ui-inplace-editor {
    position: relative;
    bottom: 8px;
}

在 FF 和 IE9 中测试

【讨论】：

为底部设置固定值是一种“静态”解决方案，基本上如果 selectOneMenu 的高度发生变化，则必须更改该静态值。