Sobreposição panelGrid

24 de setembro de 2019 5 respostas

havb 24 de setembro de 2019

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>

5 Respostas

Jothar_Aleksander 24 de set. de 2019

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 24 de set. de 2019

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.

Jothar_Aleksander 25 de set. de 2019

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.
Já limpou o cache do navegador?

havb 26 de set. de 2019

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 26 de set. de 2019

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>

Criado 24 de setembro de 2019

Ultima resposta 26 de set. de 2019

Respostas 5

Participantes 2

5 Respostas

Topicos relacionados