jsf - Primefaces datatable header searchbox breaks table layout -
i have realy strange behavior if place components inside datatable header.
code table
<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>
you can find generated html here jsfiddle
so problem code? why serach box destroy table layout?
okay found it. maybe someday facing same problem.
the searchbox big in line text. if change inputtext
size , set outputpanel
inline looks intended.
<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>
Comments
Post a Comment