havb
Setembro 24, 2019, 12:15pm
#1
Bom dia, estou com um problema no JSF no componente panelGrid, que ao carregar a página, as vezes ele fica sobreposto um em cima do outro, mas quando eu dou refresh manual na pag (f5) eles chegam no lugar, alguem tem ideia do que seja?
<p:panelGrid style="margin-top:20px; width:100%; background-color: #7198BF" >
<div>
<f:facet name="header">
<p:row style="height:50px">
<p:column colspan="3">
<div style="text-align: center; width: 100%;">
<div style="float: center; display: inline-block;font-size : 16px;color: #FFFFFF">#{equip.name}</div>
<div style="float: right; display: inline-block;">
<p:commandButton id="btnExtLink" action="#{alMB.redirectExternalLink(equip.externalLink)}"
icon="fa fa-fw fa-external-link" target="_blank"
rendered="#{not empty equip.externalLink}" />
<p:tooltip id="toolTipExt" for="btnExtLink"
value="Link Externo" />
</div>
<div style="float: right; display: inline-block;">
<p:commandButton id="btnEquipTC"
update="formTelecomandos"
action="#{alMB.mostrarTelecomandos(equip)}"
rendered="#{equip.hasTelecomando}"
icon="fa fa-fw fa-terminal" />
<p:tooltip id="toolTipTele" for="btnEquipTC"
value="Telecomandos" />
</div>
</div>
</p:column>
</p:row>
</f:facet>
<p:row>
<p:column rowspan="5" style="background-color:#DDE3EF">
<i class="#{alMB.getIcon(equip)}" />
</p:column>
<p:column rowspan="5" style="background-color:#DDE3EF">
<p:dataTable emptyMessage="Nenhum registro encontrado"
var="to" value="#{equip.highLevelDtoList}" style="width: 100%;background-color:#DDE3EF"
scrollable="true" scrollHeight="200" rowKey="#{to.highCode}">
<p:column headerText="Nome" styleClass="#{alMB.printColor(to)}">
<h:outputText value="#{to.toModel.name}" />
</p:column>
<p:column headerText="Status" styleClass="#{alMB.printColor(to)}">
<h:outputText value="#{to.situacao}" />
</p:column>
<p:column style="width:16px;text-align:center" styleClass="#{alMB.printColor(to)}">
<p:selectBooleanCheckbox
rendered="#{!alMB.isComando(to)}">
<p:ajax
listener="#{alMB.atualizaToSelecionados(to)}" />
</p:selectBooleanCheckbox>
</p:column>
</p:dataTable>
</p:column>
</p:row>
</div>
<f:facet name="footer">
<p:row>
</p:row>
</f:facet>
</p:panelGrid>
Reorganizando a indentação…
<p:panelGrid style="margin-top:20px; width:100%; background-color: #7198BF" >
<div>
<f:facet name="header">
<p:row style="height:50px">
<p:column colspan="3">
<div style="text-align: center; width: 100%;">
<div style="float: center; display: inline-block;font-size : 16px;color: #FFFFFF">#{equip.name}
</div>
<div style="float: right; display: inline-block;">
<p:commandButton id="btnExtLink" action="#{alMB.redirectExternalLink(equip.externalLink)}"
icon="fa fa-fw fa-external-link" target="_blank"
rendered="#{not empty equip.externalLink}"
/>
<p:tooltip id="toolTipExt" for="btnExtLink"
value="Link Externo"
/>
</div>
<div style="float: right; display: inline-block;">
<p:commandButton id="btnEquipTC"
update="formTelecomandos"
action="#{alMB.mostrarTelecomandos(equip)}"
rendered="#{equip.hasTelecomando}"
icon="fa fa-fw fa-terminal"
/>
<p:tooltip id="toolTipTele" for="btnEquipTC"
value="Telecomandos"
/>
</div>
</div>
</p:column>
</p:row>
</f:facet>
<p:row>
<p:column rowspan="5" style="background-color:#DDE3EF">
<i class="#{alMB.getIcon(equip)}" />
</p:column>
<p:column rowspan="5" style="background-color:#DDE3EF">
<p:dataTable emptyMessage="Nenhum registro encontrado"
var="to" value="#{equip.highLevelDtoList}" style="width: 100%;background-color:#DDE3EF"
scrollable="true" scrollHeight="200" rowKey="#{to.highCode}">
<p:column headerText="Nome" styleClass="#{alMB.printColor(to)}">
<h:outputText value="#{to.toModel.name}" />
</p:column>
<p:column headerText="Status" styleClass="#{alMB.printColor(to)}">
<h:outputText value="#{to.situacao}" />
</p:column>
<p:column style="width:16px;text-align:center" styleClass="#{alMB.printColor(to)}">
<p:selectBooleanCheckbox
rendered="#{!alMB.isComando(to)}">
<p:ajax
listener="#{alMB.atualizaToSelecionados(to)}" />
</p:selectBooleanCheckbox>
</p:column>
</p:dataTable>
</p:column>
</p:row>
</div>
<f:facet name="footer">
<p:row>
</p:row>
</f:facet>
</p:panelGrid>
O <f:facet name="footer"> fica fora da <div>?
havb
Setembro 24, 2019, 1:39pm
#3
Obrigado pela identação, sou novo no GUJ e agradeço, o facet footer tanto faz ele ficar dentro ou fora da DIV nesse caso, tanto dentro quanto fora os itens ainda ficam sobrepondo.
O que eu quis indicar é: remova alguns elementos do XHTML para ver se o problema persiste. Eu me lembro que certa vez tive um problema parecido, daí tive que rearranjar as marcações. Mas só descobri isso depois que foi suprimindo algumas marcações até descobrir a partir de qual ponto as coisas funcionavam como deveria. Depois fui adicionando pouco a pouco as partes retiradas ao mesmo que ia testando (rodando). À época, acabei resolvendo assim.
havb
Setembro 26, 2019, 11:32am
#5
ja limpei sim, limpo a todo momento pois estou editando CSS da aplicação tambem, vou tentar o que você sugeriu e volto aqui depois para comentar o resultado. Grato.
havb
Setembro 26, 2019, 4:28pm
#6
Jothar_Aleksander segui a sua sugestão de desmembrar as marcações e consegui resolver o problema.
O erro estava dentro do panelgrid no data table criado, a largura das columns não estavam dinamicas, após uma hora de testes consegui os valores dos tamanhos que precisava e deu certo. Obrigado pela sua paciência em ajudar pessoas novas no mercado. Obrigado.
<p:dataTable emptyMessage="Nenhum registro encontrado"
var="to" value="#{equip.highLevelDtoList}"
scrollable="true" scrollHeight="200" style="width: auto"
rowKey="#{to.highCode}">
<p:column headerText="Nome" style="width:90px"
styleClass="#{alarmesMB.printColor(to)}">
<h:outputText value="#{to.toModel.name}" />
</p:column>
<p:column headerText="Status" style="width:80px"
styleClass="#{alarmesMB.printColor(to)}">
<h:outputText value="#{to.situacao}" />
</p:column>
<p:column style="width:8px;text-align: center"
styleClass="#{alarmesMB.printColor(to)}">
<p:selectBooleanCheckbox
rendered="#{!alarmesMB.isComando(to)}">
<p:ajax
listener="#{alarmesMB.atualizaToSelecionados(to)}" />
</p:selectBooleanCheckbox>
</p:column>
</p:dataTable>
