在PrimeFaces中使用p：inplace

Question

在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>所示。

有没有办法自定义此行为？

Answer 1

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

在您的情况下，有三个组件，inputText inputTextArea和selectOneMenu，现在inputText和inputTextArea都有ui-inputfield CSS类，selectOneMenu已ui-selectonemenu表示您可以按以下方式进行调整：

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

Answer 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中测试