Primefaces datatable paginator is not affected by page's layout changes - jsf

Question

I am using Primefaces 4.0 Datatable with a paginator. The table lies right under a
accordionPanel wich can expand or collapse, affecting the layout of the page.
Unfortunately, the paginator of the datatable doesn't move when the accordion animation is performed.
BEFORE EXPANDING the accordion:
AFTER EXPANDING the accordion:
I have kinda taken the code from primefaces showcase, and didn't touch it much, but anyway here's what is in my xhtml:
Any idea of what i'm doing wrong?
TABLE CODE:
<p:dataTable id="idDataTable" value="#{analysisBean.listOfSamu}" var="nthSamu" rows="10"
paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
selectionMode="single">
<p:column headerText="ID" sortBy="#{nthSamu.idSamu}" filterBy="#{nthSamu.idSamu}" filterMatchMode="contains">
<h:outputText value="#{nthSamu.idSamu}"/>
</p:column>
<p:column headerText="EJE" sortBy="#{nthSamu.nombre}" filterBy="#{nthSamu.nombre}" filterMatchMode="contains">
<h:outputText value="#{nthSamu.nombre}"/>
</p:column>
<p:column headerText="EJE" sortBy="#{nthSamu.primerApellido}" filterBy="#{nthSamu.primerApellido}" filterMatchMode="contains">
<h:outputText value="#{nthSamu.primerApellido}"/>
</p:column>
<p:column headerText="IM" sortBy="#{nthSamu.importe}" filterBy="#{nthSamu.importe}" filterMatchMode="contains">
<h:outputText value="#{nthSamu.importe}"/>
</p:column>
<p:column headerText="FE" sortBy="#{nthSamu.fecha}" filterBy="#{nthSamu.fecha}" filterMatchMode="contains">
<h:outputText value="#{nthSamu.fecha}"/>
</p:column>
</p:dataTable>
ACCORDION CODE:
enter code her <p:fieldset legend="Filtros" style="width: 40%" >
<h:panelGrid columns="1">
<p:accordionPanel multiple="true" style="width: 100%">
<p:tab title="Acerca del Giro">
<h:panelGrid columns="5">
<h:column>
<h:outputLabel style="vertical-align:middle" value="Oficina: " />
<p:selectOneMenu id="oficinaSelect" style="vertical-align:middle">
<f:selectItem itemLabel="Todos" itemValue="Todos" />
<f:selectItem itemLabel=" Naguaes" itemValue=" Naguaes" />
<f:selectItem itemLabel=" aguaes" itemValue=" aguaes" />
<f:selectItem itemLabel="Naguaes" itemValue=" s Naguaes" />
<f:selectItem itemLabel="aguaes" itemValue=" s aguaes" />
</p:selectOneMenu>
</h:column>
<h:column>
<h:outputLabel style="vertical-align:middle" value="País: "/>
<p:selectOneMenu id="paisSelect" style="vertical-align:middle">
<f:selectItem itemLabel="Todos" itemValue="Todos" />
<f:selectItem itemLabel="Naguaes" itemValue=" Naguaes" />
<f:selectItem itemLabel="aguaes" itemValue=" aguaes" />
<f:selectItem itemLabel="Naguaes" itemValue=" s Naguaes" />
<f:selectItem itemLabel="aguaes" itemValue=" s aguaes" />
</p:selectOneMenu>
</h:column>
</h:panelGrid>
</p:tab>
<p:tab title="Acerca del Ejecutor">
<h:panelGrid columns="5">
<p:graphicImage url="images/usericon.png" width="30" height="30" style="border: 3px solid activecaption"/>
<h:column>
<h:outputLabel value="Naguaidad:" style="vertical-align:middle"/>
<p:selectOneMenu id="idNaguaidadSelect2" style="vertical-align:middle">
<f:selectItem itemLabel="Todos" itemValue="Todos" />
<f:selectItem itemLabel="aguaes" itemValue=" Naguaes" />
<f:selectItem itemLabel="guaes" itemValue=" aguaes" />
<f:selectItem itemLabel="Naguaes" itemValue=" s Naguaes" />
<f:selectItem itemLabel="aguaes" itemValue=" s aguaes" />
</p:selectOneMenu>
</h:column>
<h:column>
<h:outputLabel value=" Porto NInj:" style="vertical-align:middle" />
<p:selectOneMenu id="id PortoNInjSelect" style="vertical-align:middle">
<f:selectItem itemLabel="Todos" itemValue="Todos" />
<f:selectItem itemLabel="aguaes" itemValue=" Naguaes" />
<f:selectItem itemLabel="guaes" itemValue=" aguaes" />
<f:selectItem itemLabel="Naguaes" itemValue=" s Naguaes" />
<f:selectItem itemLabel="aguaes" itemValue=" s aguaes" />
</p:selectOneMenu>
</h:column>
<h:column>
<h:outputLabel value="Actividad:" style="vertical-align:middle"/>
<p:selectOneMenu id="idActividadSelect" style="vertical-align:middle">
<f:selectItem itemLabel="Todos" itemValue="Todos" />
<f:selectItem itemLabel=" Naguaes" itemValue=" Naguaes" />
<f:selectItem itemLabel=" aguaes" itemValue=" aguaes" />
<f:selectItem itemLabel=" s Naguaes" itemValue=" s Naguaes" />
<f:selectItem itemLabel=" s aguaes" itemValue=" s aguaes" />
</p:selectOneMenu>
</h:column>
</h:panelGrid>
</p:tab>
</p:accordionPanel>
<p:commandButton id="idFiltrarCommandButton2" style="float:right" icon="ui-icon-search" value="Filtrar" action="#{analysisBean.populateList()}" update="idDataTable"></p:commandButton>
</h:panelGrid>
</p:fieldset>

Answer 1

I'm fairly with prime-faces. Seems like you need to have the dataTable and the accordionPanel within two seperate forms and panels. I would recommend doing something like,
Code:
<Dialogue>
<Form1>
<Panel>
Datatable
</panel>
</Form1>
<Form2>
<panel>
AccordionPanel
</panel>
</Form2>
</Dialogue>
just don't forget to update the respective forms accordingly