Primefaces数据表标题搜索框打破表格布局

Question

如果我将组件放在数据表头中，我有一个奇怪的行为。

表格代码

<p:dataTable id="groupTable" var="group" value="#{profile.user.groups}"
                             widgetVar="groupTable" rows="10" paginator="true"
                             paginatorPosition="bottom"
                             paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                             rowsPerPageTemplate="5,10,20,40,80"
                             emptyMessage="Keine Einträge mit den gewünschten Kriterien gefunden"
                             filteredValue="#{groupView.filteredGroups}" sortMode="multiple"
                             resizableColumns="true" liveResize="true">
    <f:facet name="header">
        <h:outputText value="Zugeordnete Gruppen" />
        <p:outputPanel style="float:left;">
            <p:inputText id="globalFilter" onkeyup="PF('groupTable').filter()" style="width:150px;" placeholder="Suche"/>
        </p:outputPanel>
    </f:facet>

    <p:column headerText="Gruppenname" filterBy="#{group.name}"
                              sortBy="#{group.name}" filterMatchMode="contains"
                              filterStyle="display:none" style="width:150px">
        <h:outputText value="#{group.name}"/>
    </p:column>

    <p:column headerText="Beschreibung" filterBy="#{group.beschreibung}"
                              sortBy="#{group.beschreibung}" filterMatchMode="contains"
                              filterStyle="display:none">
         <h:outputText value="#{group.beschreibung}"/>
     </p:column>
</p:dataTable>

您可以在jsfiddle

找到生成的HTML

在页面本身上它看起来像这样：

那么代码有什么问题？为什么serach盒会破坏表格布局？

Answer 1

好的，我找到了。也许有一天它会帮助另一个面临同样的问题。

搜索框与文字大相符。如果我更改inputtext尺寸并将outputpanel内联设置为内嵌，则表明它是预期的。

<f:facet name="header">
    <h:outputText value="Zugeordnete Gruppen" />
    <p:outputPanel style="display:inline">
        <p:inputText id="globalFilter" onkeyup="PF('groupTable').filter()" style="width:150px;height:10px;float:left" placeholder="Suche"/>
    </p:outputPanel>
</f:facet>