Viciado
Outubro 11, 2013, 11:33pm
#1
Como eu posso centralizar uma dataTable? Estou tentando, utilizando CSS, mas com os mesmo parâmetros o header, paginator e o table ficam foram de ordem.
Meu CSS:
.ui-datatable table {
width: 1000px;
margin: 0 auto;
min-height: 25px;
border: none;
}
.ui-datatable .ui-datatable-header {
width: 1000px;
margin: 0 auto;
min-height: 25px;
border: none;
}
.ui-datatable .ui-paginator {
width: 1000px;
margin: 0 auto;
min-height: 25px;
border: none;
}
Estranhamente o header fica maior que o paginator que fica maior que o table
Viciado
Outubro 17, 2013, 8:43pm
#2
[quote=Viciado]Como eu posso centralizar uma dataTable? Estou tentando, utilizando CSS, mas com os mesmo parâmetros o header, paginator e o table ficam foram de ordem.
Meu CSS:
.ui-datatable table {
width: 1000px;
margin: 0 auto;
min-height: 25px;
border: none;
}
.ui-datatable .ui-datatable-header {
width: 1000px;
margin: 0 auto;
min-height: 25px;
border: none;
}
.ui-datatable .ui-paginator {
width: 1000px;
margin: 0 auto;
min-height: 25px;
border: none;
}
Estranhamente o header fica maior que o paginator que fica maior que o table[/quote]
Alguém tem ideia de porque isso está acontecendo se todos tem as mesmas propriedades no CSS?
Minha dataTable:
<p:dataTable var="cliente" value="#{clienteMB.carregarCliente()}" rowKey="#{clienteMB.cliente.id}"
paginator="true" rows="10" selection="#{clienteMB.clienteSelecionado}"
filteredValue="#{clienteMB.clientesFiltrados}" id="clientesTable">
<p:ajax event="rowSelect" update=":form:display" oncomplete="PF('clienteDialog').show()" />
<f:facet name="header">Lista de Clientes</f:facet>
<p:column headerText="Id" sortBy="#{cliente.id}" filterBy="#{cliente.id}">
#{cliente.id}
</p:column>
<p:column headerText="Nome" sortBy="#{cliente.nome}" filterBy="#{cliente.nome}">
#{cliente.nome}
</p:column>
<p:column headerText="Fone" sortBy="#{cliente.fone}" filterBy="#{cliente.fone}">
#{cliente.fone}
</p:column>
<p:column headerText="Email" sortBy="#{cliente.email}" filterBy="#{cliente.email}">
#{cliente.email}
</p:column>
</p:dataTable>