Jsf Primefaces数据表标题搜索框打断表布局

如果我将组件放在datatable头中，我会有一种非常奇怪的行为

表的代码

<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>

您可以在这里找到生成的HTML

在页面本身上，它如下所示：

---

那么代码有什么问题呢？为什么塞拉奇盒子会破坏桌子布局？

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

搜索框太大，与文本一致。如果我更改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>

---

定义奇怪的行为…我指的是破坏表格布局的搜索框。正如你在图片中所看到的，我把话题改成了一个更精确的话题。在答案中提问通常是一个坏主意。在答案中提问是被严重禁止的