Bom dia Pessoal.
Seguinte, não sei se é algum problema da versão ou se eu estou fazendo alguma coisa errada, mas a <p:dataTable> do primefaces está estourando os limites que dei para a página.
Por exemplo:
https://www.dropbox.com/s/lz4s57bfrc2ndor/limitesPrime.png
Meu código da dataTable é o seguinte, e antes de atualizar para a versão 3.6 funcionava. Já pesquisei sobre o assunto e não encontrei muita coisa.
<p:dataTable var="nfe"
value="#{nFeSaidaIndexMB.nfeXmlDM}"
paginator="true"
id="lista"
widgetVar="lista"
paginatorPosition="bottom"
selection="#{nFeSaidaIndexMB.nfe_saida}"
selectionMode="single"
emptyMessage="Nenhum registro encontrado"
pageLinks="5"
rows="20"
style="margin-top: 4px">
<p:ajax process="lista" event="rowSelect" />
<p:column style="width: 65px;" >
<f:facet name="header">
<h:outputText value="Data"/>
</f:facet>
<h:outputText value="#{nfe.demi}">
<f:convertDateTime pattern="dd/MM/yyyy"/>
</h:outputText>
</p:column>
<p:column style="width: 45px;">
<f:facet name="header">
<h:outputText value="N° Nfe"/>
</f:facet>
<h:outputText value="#{nfe.nnf}"/>
</p:column>
</p:dataTable>
Opa gilvanandre,
Não sei exatamente se foi pela atualização, mas com certeza não é indicado utilizar px nos width, e sim % para ele se auto adaptar pelo tamanho de tela que esta. Da uma olhada nesse link tem exemplo do própio prime, acho que isso resolve seu problema.
http://www.primefaces.org/showcase/ui/datatableCellEditing.jsf
Cara, estou com o mesmo problema que vc!
[quote=AndreBonatti]Opa gilvanandre,
Não sei exatamente se foi pela atualização, mas com certeza não é indicado utilizar px nos width, e sim % para ele se auto adaptar pelo tamanho de tela que esta. Da uma olhada nesse link tem exemplo do própio prime, acho que isso resolve seu problema.
http://www.primefaces.org/showcase/ui/datatableCellEditing.jsf[/quote]
Opa, vou fazer o teste. Por momento eu consegui corrigir o problema usando width e max max-width, ai delimitei ao tamanho máximo que o campo pode ter, pois quando, por exemplo, o nome for maior, estava estourando o width, portanto coloquei o max-width para ele não estourar esse campo. Mas continua aceitando sugestões para tentar resolver o meu problema sem usar gambiarras. :-o
Obrigado
[quote=gilvanandre][quote=AndreBonatti]Opa gilvanandre,
Não sei exatamente se foi pela atualização, mas com certeza não é indicado utilizar px nos width, e sim % para ele se auto adaptar pelo tamanho de tela que esta. Da uma olhada nesse link tem exemplo do própio prime, acho que isso resolve seu problema.
http://www.primefaces.org/showcase/ui/datatableCellEditing.jsf[/quote]
Opa, vou fazer o teste. Por momento eu consegui corrigir o problema usando width e max max-width, ai delimitei ao tamanho máximo que o campo pode ter, pois quando, por exemplo, o nome for maior, estava estourando o width, portanto coloquei o max-width para ele não estourar esse campo. Mas continua aceitando sugestões para tentar resolver o meu problema sem usar gambiarras. :-o
Obrigado[/quote]
Obrigado pela ajuda ai, mas fiz o teste e com percentual também acontece o mesmo problema.
Vlw
Olá, tens como postar o teu xhtml inteiro, dessa página ? Ou pelo menos as camadas que envolvem o teu datatable.
O código dá página que resolvi com o max-width é a seguinte.
<div style="width: 1000px; margin: 0px auto; text-align: left;">
<h:form id="form">
<p:dataTable var="pes"
value="#{pessoaIndexMB.lista_pessoas}"
paginator="true"
paginatorPosition="bottom"
selection="#{pessoaIndexMB.pessoaSel}"
emptyMessage="Nenhum registro encontrado"
pageLinks="5"
id="lista_pessoa"
rows="15"
rowKey="#{pes.codigo_pessoa}"
style="margin-top: 4px">
<p:column style="width: 40px;" selectionMode="multiple" exportable="false"/>
<p:column style="width: 260px; max-width: 260px;" sortBy="#{pes.nome_razao}" >
<f:facet name="header">Nome / Razão Social</f:facet>
<h:outputText value="#{pes.nome_razao}" title="#{pes.nome_razao}" />
</p:column>
<p:column style="width: 260px; max-width: 260px;" sortBy="#{pes.nome_fantasia}">
<f:facet name="header">Apelido / Nome Fantasia</f:facet>
<h:outputText value="#{pes.nome_fantasia}" title="#{pes.nome_fantasia}"/>
</p:column>
<p:column style="width: 140px;">
<f:facet name="header">CPF/CNPJ</f:facet>
<h:outputText value="#{pes.cpf_cnpj}"/>
</p:column>
<p:column style="width: 100px;">
<f:facet name="header">Telefone</f:facet>
<h:outputText value="#{pes.tel_principal}"/>
</p:column>
<p:column style="width: 150px; max-width: 150px;">
<f:facet name="header">Cidade</f:facet>
<h:outputText value="#{pes.endereco_padrao.cidade.nome} - #{pes.endereco_padrao.cidade.estado.sigla}"
title="#{pes.endereco_padrao.cidade.nome} - #{pes.endereco_padrao.cidade.estado.sigla}"/>
</p:column>
<p:column style="width: 50px;" exportable="false">
<f:facet name="header">Ver</f:facet>
<p:button icon="ui-icon-search"
outcome="#{pessoaIndexMB.arquivo()}">
<f:param name="id" value="#{pes.codigo_pessoa}"/>
</p:button>
</p:column>
<f:facet name="footer">
<h:commandLink value="Exportar PDF" disabled="#{empty pessoaIndexMB.lista_pessoas}">
<p:dataExporter type="pdf"
target="lista_pessoa"
fileName="Cadastros"
encoding="iso-8859-1"
preProcessor="#{pessoaIndexMB.geraPDF}"/>
</h:commandLink>
</f:facet>
<f:facet name="footer">
<h:commandLink value="Exportar XLS" disabled="#{empty pessoaIndexMB.lista_pessoas}" style="margin-left: 20px">
<p:dataExporter type="xls"
target="lista_pessoa"
fileName="Cadastros"
encoding="iso-8859-1"
preProcessor="#{pessoaIndexMB.exportaEXCEL}"/>
</h:commandLink>
</f:facet>
</p:dataTable>
<h:panelGrid columns="2" style="margin: 0px; border-spacing: 0px">
<p:commandButton value="Novo"
icon="ui-icon-plus"
onstart="showLoading('formNovo:imagemNovo');"
process="@this"
style="margin-top: 4px">
<f:setPropertyActionListener value="#{pessoaIndexMB.intModulo}" target="#{menusMB.intModulo}"/>
</p:commandButton>
<p:graphicImage id="imagemNovo" value="/imagens/ajaxloading.gif" style="margin-left: 5px; display: none;"/>
<p:commandButton value="Imprime Envelopes"
action="#{pessoaIndexMB.imprimeEnvelopePequeno()}"
icon="ui-icon-print"
process=":form:lista_pessoa @this"
update=":pesquisa:msg"
style="margin-top: -32px; margin-left: 849px; position: absolute">
</p:commandButton>
</h:panelGrid>
</h:form>
</div>
A está apenas dentro de um form. E o que comanda o tamanho é a
, ou melhor, comandava até eu fazer a atualização do PrimeFaces.
Te compreendi,
Como falei não é o mais aconselhável utilizar px, mas se faz necessário pela necessidade … faz um teste colocando 100% no div e atribuindo um espaço para cada coluna, utiliza regra de 3, pra transformar px em % pra isso. deve dar algum problema pelo teus controles de margin dos commandButton e comandLink, mas faça o teste pra ver se obedece o teu div, pode acontecer de um css de componente estar sobrepondo, daí vem fazendo testes nos componentes, chegando até no style do datatable.
obs.: Só pra esclarecer esse não é o mesmo form que tem naquela imagem do dropbox ?
[quote=AndreBonatti]Te compreendi,
Como falei não é o mais aconselhável utilizar px, mas se faz necessário pela necessidade … faz um teste colocando 100% no div e atribuindo um espaço para cada coluna, utiliza regra de 3, pra transformar px em % pra isso. deve dar algum problema pelo teus controles de margin dos commandButton e comandLink, mas faça o teste pra ver se obedece o teu div, pode acontecer de um css de componente estar sobrepondo, daí vem fazendo testes nos componentes, chegando até no style do datatable.
obs.: Só pra esclarecer esse não é o mesmo form que tem naquela imagem do dropbox ?[/quote]
Não é o mesmo form não… mas o problema que acontece neste é igual ao daquele, como são padrões do sistema, é o mesmo.
Como falei antes, fiz o teste novamente utilizando percentual ao invés de px, e o problema continua. mesmo alterando a div para 100%, e os devidos campos também.
Obrigado.
Blz … Boa sorte, se encontrar uma solução melhor, ou chegar a conclusão que essa é a única solução, posta aí. Conhecimento nunca e demais, vlw.
