在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>一個示例中的<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測試