Hi,
I'm having trouble displaying the "inputSwitch" component and the "knob" in Chrome.
As pictures below:
<p:knob />
<p:inputSwitch />
The problem only occurs in Chrome. Firefox and IE works normally.
erro layout on chrome v.59
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
I couldn't replicate it. Do you get an error on browser's console? You can try it with 60.0.3112.90 Chrome version. Also,could you please attach a sample xhtml page for us to replicate?
Github Profile: https://github.com/mertsincan
-
- Posts: 122
- Joined: 13 Dec 2011, 15:07
Yes, I try with version "Versão 60.0.3112.90 (Versão oficial) 64 bits".
Code: Select all
<ui:define name="content">
<p:dialog id="consultaLoteDialog" widgetVar="consultaLoteDialog" header="#{msg.lote}" responsive="true" showEffect="clip" hideEffect="clip" modal="true" resizable="false" closeOnEscape="true" >
<div class="ui-g">
<div class="ui-g-12">
<div class="card">
<p:focus for="lote" />
<p:panelGrid id="pnlConsultaLote" columns="2" styleClass="ui-panelgrid-blank form-group">
<p:panelGrid columns="2" styleClass="ui-panelgrid-blank form-group">
<p:outputLabel for="lote" value="#{msg.lote}" />
<p:autoComplete id="lote" minQueryLength="4" value="#{cacBean.idLoteProduto}" queryDelay="1000" completeMethod="#{cacBean.listarLotesSonma}"
var="lotes" itemLabel="#{cacBean.lotesSonmaVW.ltLote}" itemValue="#{lotes.id.toString()}"
inputStyleClass="uppercase" style="width: 100px" effect="fade" >
<p:ajax listener="#{cacBean.consultarLote()}" event="itemSelect" update="pnlConsultaLote" />
<p:column headerText="#{msg.lote}">
<h:outputText value="#{lotes.ltLote}" />
</p:column>
<p:column headerText="#{msg.medicamentoProduto}">
<h:outputText value="#{lotes.prNome}" />
</p:column>
<p:column headerText="#{msg.empresa}">
<h:outputText value="#{lotes.efEmpresa}" />
</p:column>
<p:column headerText="#{msg.dataValidade}">
<h:outputText value="#{lotes.ltDtvencto}" >
<f:convertDateTime pattern="MM/yyyy"/>
</h:outputText>
</p:column>
</p:autoComplete>
<p:outputLabel for="medicamentoProduto" value="#{msg.medicamentoProduto}" />
<p:autoComplete id="medicamentoProduto" minQueryLength="4" queryDelay="1000" value="#{cacBean.idLoteProduto}" completeMethod="#{cacBean.listarProdutoSonmaNome}"
var="medicamentoProdutos" itemLabel="#{cacBean.lotesSonmaVW.prNome}" itemValue="#{medicamentoProdutos.id.toString()}"
inputStyleClass="uppercase" effect="fade" >
<p:ajax listener="#{cacBean.consultarLote()}" event="itemSelect" update="pnlConsultaLote" />
<p:column headerText="#{msg.lote}">
<h:outputText value="#{medicamentoProdutos.ltLote}" />
</p:column>
<p:column headerText="#{msg.medicamentoProduto}">
<h:outputText value="#{medicamentoProdutos.prNome}" />
</p:column>
<p:column headerText="#{msg.empresa}">
<h:outputText value="#{medicamentoProdutos.efEmpresa}" />
</p:column>
<p:column headerText="#{msg.dataValidade}">
<h:outputText value="#{medicamentoProdutos.ltDtvencto}" >
<f:convertDateTime pattern="MM/yyyy"/>
</h:outputText>
</p:column>
</p:autoComplete>
<p:outputLabel for="dataFabricacao" value="#{msg.dataFabricacao}"/>
<h:outputText id="dataFabricacao" value="#{cacBean.lotesSonmaVW.ltTerfabric}" >
<f:convertDateTime pattern="MM/yyyy"/>
</h:outputText>
<p:outputLabel for="dataValidade" value="#{msg.dataValidade}"/>
<h:outputText id="dataValidade" value="#{cacBean.lotesSonmaVW.ltDtvencto}" >
<f:convertDateTime pattern="MM/yyyy"/>
</h:outputText>
</p:panelGrid>
<p:panelGrid columns="2" styleClass="ui-panelgrid-blank form-group">
<p:outputLabel for="linhaProduto" value="#{msg.linhaProduto}" />
<h:outputText id="linhaProduto" value="#{cacBean.lotesSonmaVW.agSubgrupo}" />
<p:outputLabel for="empresa" value="#{msg.empresa}" />
<h:outputText id="empresa" value="#{cacBean.lotesSonmaVW.efEmpresa} "/>
<p:outputLabel for="fabrica" value="#{msg.fabrica}" />
<h:outputText id="fabrica" value="#{cacBean.lotesSonmaVW.seqLote}" />
<p:outputLabel for="ativo" value="#{msg.ativo}" />
<p:inputSwitch id="ativo" value="#{cacBean.loteAtivo}" disabled="true" onLabel="#{msg.sim}" offLabel="#{msg.nao}" />
</p:panelGrid>
</p:panelGrid>
</div>
</div>
</div>
</p:dialog>
<div class="ui-g">
<div class="ui-g-12">
<div class="card">
<h:form>
<p:toolbar>
<f:facet name="right">
<p:commandButton value="#{msg.menusOpcoesNovo}" icon="fa fa-plus" action="#{cacBean.novo()}"/>
<p:commandButton value="#{msg.excel}" icon="fa fa-file-excel-o" ajax="false">
<p:dataExporter type="xls" target="dtAtendimentos" fileName="atendimentos" pageOnly="true" />
</p:commandButton>
<p:commandButton value="#{msg.PDF}" icon="fa fa-file-pdf-o" ajax="false" >
<p:dataExporter type="pdf" target="dtAtendimentos" fileName="atendimentos" pageOnly="true" />
</p:commandButton>
</f:facet>
<f:facet name="left">
<p:commandButton value="#{msg.lote}" icon="fa fa-cube" actionListener="#{cacBean.novaConsultaLote()}" oncomplete="PF('consultaLoteDialog').show();" update="pnlConsultaLote" />
</f:facet>
</p:toolbar>
<p:dataTable id="dtAtendimentos" var="twebatendimentosTO" widgetVar="atendimentos" value="#{cacBean.lazyModelAtendimento}" filterDelay="10000" selectionMode="single" selection="#{cacBean.atendimentoSelecionado}" filteredValue="#{cacBean.antendimentosFiltrados}" rowKey="#{twebatendimentosTO.id}" paginatorPosition="top"
rows="10" paginator="true" lazy="true" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} {Exporters}"
rowsPerPageTemplate="5,10,15,50,100,500,1000" emptyMessage="#{msg.nenhumAtendimentoCadastrado}" reflow="true" scrollable="true" >
<f:facet name="{Exporters}">
<p:outputPanel style="float: left;">
<p:inputText id="globalFilter" onkeyup="PF('atendimentos').filter()" placeholder="#{msg.pesquisar}..."/>
</p:outputPanel>
</f:facet>
<p:column headerText="#{msg.numeroRAC}" sortBy="#{twebatendimentosTO.rac}" >
<h:outputText value="#{twebatendimentosTO.rac}" />
</p:column>
<p:column headerText="#{msg.dataAtendimento}" sortBy="#{twebatendimentosTO.data}" >
<h:outputText value="#{twebatendimentosTO.data}" >
<f:convertDateTime pattern="dd/MM/yyyy"/>
</h:outputText>
</p:column>
<p:column headerText="#{msg.tipoCliente}" visible="false" >
<h:outputText value="#{twebatendimentosTO.tipoCliente}" />
</p:column>
<p:column headerText="#{msg.nomeCliente}" filterMatchMode="contains" sortBy="#{twebatendimentosTO.nomeCliente}">
<h:outputText value="#{twebatendimentosTO.nomeCliente}" />
</p:column>
<p:column headerText="#{msg.contato}" filterMatchMode="contains" sortBy="#{twebatendimentosTO.contato}">
<h:outputText value="#{twebatendimentosTO.contato}" />
</p:column>
<p:column headerText="#{msg.UF}" visible="false" >
<h:outputText value="#{twebatendimentosTO.uf}" />
</p:column>
<p:column headerText="#{msg.DDD}" visible="false" >
<h:outputText value="#{twebatendimentosTO.telefone.substring(0,2)}" />
</p:column>
<p:column headerText="#{msg.telefone}" visible="false" >
<h:outputText value="#{twebatendimentosTO.telefone.substring(2,twebatendimentosTO.telefone.length())}" />
</p:column>
<p:column headerText="#{msg.lote}" filterMatchMode="contains" sortBy="#{twebatendimentosTO.loteProduto}">
<h:outputText value="#{twebatendimentosTO.loteProduto}" />
</p:column>
<p:column headerText="#{msg.dataFabricacao}" visible="false" >
<h:outputText value="#{twebatendimentosTO.dataFabricacao}" >
<f:convertDateTime pattern="MM/yyyy"/>
</h:outputText>
</p:column>
<p:column headerText="#{msg.dataValidade}" visible="false" >
<h:outputText value="#{twebatendimentosTO.dataValidade}" >
<f:convertDateTime pattern="MM/yyyy"/>
</h:outputText>
</p:column>
<p:column headerText="#{msg.medicamentoProduto}" sortBy="#{twebatendimentosTO.medicamentoProduto}" >
<h:outputText value="#{twebatendimentosTO.medicamentoProduto}" />
</p:column>
<p:column headerText="#{msg.linhaProduto}" visible="false" >
<h:outputText value="#{twebatendimentosTO.linha}" />
</p:column>
<p:column headerText="#{msg.empresa}" visible="false" >
<h:outputText value="#{twebatendimentosTO.empresa}" />
</p:column>
<p:column headerText="#{msg.fabrica}" visible="false" >
<h:outputText value="#{twebatendimentosTO.fabrica}" />
</p:column>
<p:column headerText="#{msg.setor}" visible="false" >
<h:outputText value="#{twebatendimentosTO.setor}" />
</p:column>
<p:column headerText="#{msg.quantidadeProduto}" visible="false" >
<h:outputText value="#{twebatendimentosTO.quantidadeProduto}" />
</p:column>
<p:column headerText="#{msg.manifestacao}">
<h:outputText value="#{twebatendimentosTO.idmanifestacao.nome}" />
</p:column>
<p:column headerText="#{msg.tipoManifestacao}" visible="false" >
<h:outputText value="#{twebatendimentosTO.idtipomanifestacao.nome}" />
</p:column>
<p:column headerText="#{msg.topicoManifestacao}" visible="false" >
<h:outputText value="#{twebatendimentosTO.idtopicomanifestacao.nome}" />
</p:column>
<p:column headerText="#{msg.formaContato}" visible="false" >
<h:outputText value="#{twebatendimentosTO.formaContato}" />
</p:column>
<p:column headerText="#{msg.dataReposicao}" visible="false" >
<h:outputText value="#{twebatendimentosTO.dataReposicao}" >
<f:convertDateTime pattern="dd/MM/yyyy"/>
</h:outputText>
</p:column>
<p:column headerText="#{msg.amostraRecebida}" visible="false" >
<h:outputText value="#{twebatendimentosTO.dataColeta}" >
<f:convertDateTime pattern="dd/MM/yyyy"/>
</h:outputText>
</p:column>
<p:column headerText="#{msg.dataRI}" visible="false" >
<h:outputText value="#{twebatendimentosTO.dataRelatorioInvestigacao}" >
<f:convertDateTime pattern="dd/MM/yyyy"/>
</h:outputText>
</p:column>
<p:column headerText="#{msg.procede}" visible="false" >
<h:outputText value="#{twebatendimentosTO.procede}" />
</p:column>
<p:column headerText="#{msg.dataEncerramento}" visible="false" >
<h:outputText value="#{twebatendimentosTO.dataEncerramento}" >
<f:convertDateTime pattern="dd/MM/yyyy"/>
</h:outputText>
</p:column>
<p:column headerText="#{msg.viaReposicao}" visible="false" >
<h:outputText value="#{twebatendimentosTO.viaReposicao}" />
</p:column>
<p:column headerText="#{msg.numeroColetaLogistica}" visible="false" >
<h:outputText value="#{twebatendimentosTO.numeroColetaLogistica}" />
</p:column>
<p:column headerText="#{msg.status}" visible="false" >
<h:outputText value="#{twebatendimentosTO.status}" />
</p:column>
<p:column style="text-align:center" exportable="false">
<p:commandButton id="consultar" icon="fa fa-search-plus"
action="#{cacBean.consultar()}" process="@this">
<p:tooltip for="consultar"
value="#{msg.menusOpcoesToolTipConsultar}" />
<f:setPropertyActionListener value="#{twebatendimentosTO}"
target="#{cacBean.twebatendimentosTO}" />
</p:commandButton>
<p:commandButton id="geraRAC" icon="fa fa-file-text" rendered="#{(twebatendimentosTO.idmanifestacao.nome eq 'RECLAMAÇÃO' and twebatendimentosTO.idtopicomanifestacao.nome ne 'INSTITUCIONAL') or (twebatendimentosTO.idtopicomanifestacao.nome eq 'RECOLHIMENTO' and twebatendimentosTO.idtipomanifestacao.nome eq 'PRODUTO')}"
action="#{cacBean.geraRAC()}" update="dtAtendimentos" >
<p:tooltip for="geraRAC"
value="#{msg.geraRAC}" />
<f:setPropertyActionListener value="#{twebatendimentosTO}"
target="#{cacBean.atendimentoSelecionado}" />
</p:commandButton>
<p:commandButton id="downloadRAC" ajax="false" icon="fa fa-download" rendered="#{twebatendimentosTO.id eq cacBean.idArquivoRacGerado}" update="dtAtendimentos">
<p:tooltip for="downloadRAC"
value="#{msg.downloadRAC}" />
<p:fileDownload value="#{cacBean.arquivoRacPDF}" />
</p:commandButton>
</p:column>
<f:facet name="footer">
<h:outputFormat value="#{msg.vocePossui}" >
<f:param value="#{cacBean.totalRegistros}" />
</h:outputFormat>
</f:facet>
</p:dataTable>
</h:form>
</div>
<div class="card">
<p:panelGrid id="pnlManifestacoes" columns="4" layout="grid" styleClass="ui-panelgrid-blank form-group" style="text-align:center">
<p:panelGrid columns="2" layout="grid" styleClass="ui-panelgrid-blank form-group">
<h1 class="centerText">#{msg.reclamacoes}</h1>
<div class="knob-container ui-corner-all">
<p:knob id="totalReclamacoes" value="#{cacBean.totalReclamacoes}" disabled="true" thickness="0.1" foregroundColor="#00acac" labelTemplate="{value}%"/>
</div>
</p:panelGrid>
<p:panelGrid columns="2" layout="grid" styleClass="ui-panelgrid-blank form-group">
<h1>#{msg.reclamacoesAbertas}</h1>
<div class="knob-container ui-corner-all">
<p:knob value="#{cacBean.totalReclamacoesAbertas}" disabled="true" thickness="0.1" foregroundColor="#00acac" labelTemplate="{value}%" />
</div>
</p:panelGrid>
<p:panelGrid columns="2" layout="grid" styleClass="ui-panelgrid-blank form-group">
<h1>#{msg.reclamacoesConcluidas}</h1>
<div class="knob-container ui-corner-all">
<p:knob value="#{cacBean.totalReclamacoesConcluidas}" disabled="true" thickness="0.1" foregroundColor="#00acac" labelTemplate="{value}%" />
</div>
</p:panelGrid>
<p:panelGrid columns="2" layout="grid" styleClass="ui-panelgrid-blank form-group">
<h1>#{msg.informacoes}</h1>
<div class="knob-container ui-corner-all">
<p:knob value="#{cacBean.totalInformacoes}" disabled="true" thickness="0.1" foregroundColor="#efa64c" labelTemplate="{value}%">
</p:knob>
</div>
</p:panelGrid>
</p:panelGrid>
</div>
</div>
<!-- LADO ESQUERDO -->
<div class="ui-g-12 ui-lg-6">
<div class="card">
<p:chart type="pie" model="#{cacBean.pieModelLinha}" responsive="true" />
</div>
<div class="card">
<p:chart type="donut" model="#{cacBean.donutModelFabrica}" responsive="true" />
</div>
<div class="card datalist-noborder">
<p:dataList value="#{cacBean.twebatendimentosTOs}" var="twebatendimentosTO"
type="unordered" itemType="none" rows="4" emptyMessage="#{msg.nenhumAtendimentoCadastrado}" styleClass="cars-datalist">
<f:facet name="header" >
#{msg.ultimosAtendimentos}
</f:facet>
<div style="border-bottom: 1px solid #bdbdbd" class="clearfix car-item">
<div class="car-details">
<p>#{twebatendimentosTO.nomeCliente} - #{twebatendimentosTO.tipoCliente}</p>
<p:outputLabel value="#{twebatendimentosTO.data}" >
<f:convertDateTime pattern="dd/MM/yyyy" />
</p:outputLabel>
</div>
<p:commandButton action="#{cacBean.consultar()}" icon="ui-icon-search" style="margin:24px 24px 0 0; width: 32px">
<f:setPropertyActionListener value="#{twebatendimentosTO}" target="#{cacBean.twebatendimentosTO}" />
</p:commandButton>
</div>
</p:dataList>
</div>
</div>
<!-- LADO DIREITO -->
<div class="ui-g-12 ui-lg-6">
<div class="card">
<p:chart type="pie" model="#{cacBean.pieModelFormaContato}" responsive="true" />
</div>
<div class="card">
<p:chart type="donut" model="#{cacBean.donutModelEmpresa}" responsive="true" />
</div>
<div class="card">
<p:chart type="bar" model="#{cacBean.barModelTipoCliente}" responsive="true"/>
</div>
</div>
</div>
</ui:define>
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please make the following changes on all p:knob component;
Code: Select all
...
<p:panelGrid columns="2" layout="grid" styleClass="ui-panelgrid-blank form-group" columnClasses="#{null}, knob-container ui-corner-all">
<h1 class="centerText">#{msg.reclamacoes}</h1>
<p:knob id="totalReclamacoes" value="#{cacBean.totalReclamacoes}" disabled="true" thickness="0.1" foregroundColor="#00acac" labelTemplate="{value}%"/>
</p:panelGrid>
...
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 14 guests