erro layout on chrome v.59

Post Reply
marcelocaser
Posts: 54
Joined: 13 Dec 2011, 15:07

04 Aug 2017, 15:17

Hi,

I'm having trouble displaying the "inputSwitch" component and the "knob" in Chrome.

As pictures below:

<p:knob />

Image

<p:inputSwitch />

Image

The problem only occurs in Chrome. Firefox and IE works normally.

User avatar
aragorn
Posts: 2510
Joined: 29 Jun 2013, 12:38

07 Aug 2017, 10:53

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?

marcelocaser
Posts: 54
Joined: 13 Dec 2011, 15:07

07 Aug 2017, 15:12

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>

User avatar
aragorn
Posts: 2510
Joined: 29 Jun 2013, 12:38

10 Aug 2017, 10:00

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>
...

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest