Primefaces - Componente desaparece no IE

6 respostas
yurimindfreak

Olá,

Estou com um problema curioso... Eu criei uma tela de login em JSF utilizando o primefaces, em todos os navegadores que testei (Chrome, Firefox, Opera e Safari) a tela aparece corretamente. como segue uma print abaixo:

[img]http://images.cjb.net/54ae3.png[/img]

Porém no internet explorer o painel aonde voce informa seu usuario e senha, simplesmente some!

[img]http://images.cjb.net/76af2.png[/img]

Abaixo segue o .xhtml desta parte do código

<p:layoutUnit id="center" position="center">
                    <p:panel style="border: 0px">
                        <p:growl id="growl" showDetail="true" sticky="true"  />  
                        <h:panelGrid columns="2" >
                            <p:panel style="padding-left: 10%;height: 300px;border: 0px; width: 600px">
                                <h:outputText value="SLL" style="color: #5459c9; font-size: 3em;" styleClass="letras"/>
                                <br/>
                                <h:outputText value="" style="color: #000000; font-size: 2em" styleClass="letras" />
                                <br/><br/><br/>
                                <h:outputText value="O SLL proporcionará uma maior facilidade de uso ja que conta com:" style="color: #000000; font-size: 1.2em" styleClass="letras" />
                                <br/><br/>
                                    <h:panelGrid columns="2">
                                        <h:graphicImage url="/imagens/ad_integration.png"/>
                                        <h:outputText value="Integração com o AD" styleClass="letras" />
                                        <h:graphicImage url="/imagens/design.png"/>
                                        <h:outputText value="Visual mais intuitivo" styleClass="letras" />
                                    </h:panelGrid>
                            </p:panel >
                            <p:panel style="background-color: #f5f5f5;height: 300px;border: 0px;" id="painelLogin">
                                <br/><br/>
                                <h:outputText styleClass="letras" value="Nome de usuário" style="font-size: 17px;"/>
                                <br/>
                                <h:inputText id="campousuario" size="40" style="height: 30px" required="true" requiredMessage="Campo obrigatório" value="#{login.login}"/>
                                <br/><br/>
                                <h:outputText styleClass="letras" value="Senha" style="font-size: 17px;" />
                                <br/>
                                <h:inputSecret id="camposenha" size="40" style="height: 30px" required="true" requiredMessage="Campo obrigatório" value="#{login.senha}"/>
                                <br/><br/>
                                <p:commandButton value="Entrar" style="width: 50%" action="#{login.validarAcesso()}" ajax="false"/>
                                <p:commandButton value="Limpar"/>
                                <br /><br />
                                <h:commandLink value="Não consegue acessar a conta?" style="color: blue"/>
                            </p:panel>
                        </h:panelGrid>
                    </p:panel>
                </p:layoutUnit>

e eu entrei no código fonte da página no internet explorer e o componente consta lá, ou seja, ele está no código fonte da página, porém não aparece na tela.

Abaixo o código fonte da página mostrada no internet explorer, que mostra que o componente existe.

<script id="entrar:j_idt15_s" type="text/javascript">PrimeFaces.cw('Panel','widget_entrar_j_idt15',{id:'entrar:j_idt15'});</script></td>
<td><div id="entrar:j_idt27" class="ui-panel ui-widget ui-widget-content ui-corner-all"><div id="entrar:j_idt27_content" class="ui-panel-content ui-widget-content">
                                <br /><br /><span class="letras" style="font-size: 17px;">Nome de usuário</span>
                                <br /><input id="entrar:campousuario" type="text" name="entrar:campousuario" size="40" style="height: 30px" />
                                <br /><br /><span class="letras" style="font-size: 17px;">Senha</span>
                                <br /><input id="entrar:camposenha" type="password" name="entrar:camposenha" value="" size="40" style="height: 30px" />
                                <br /><br /><button id="entrar:j_idt35" name="entrar:j_idt35" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" style="width: 50%" type="submit"><span class="ui-button-text">Entrar</span></button><script id="entrar:j_idt35_s" type="text/javascript">PrimeFaces.cw('CommandButton','widget_entrar_j_idt35',{id:'entrar:j_idt35'});</script><button id="entrar:j_idt36" name="entrar:j_idt36" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="PrimeFaces.ab({formId:'entrar',source:'entrar:j_idt36',process:'@all'});return false;" type="submit"><span class="ui-button-text">Limpar</span></button><script id="entrar:j_idt36_s" type="text/javascript">PrimeFaces.cw('CommandButton','widget_entrar_j_idt36',{id:'entrar:j_idt36'});</script>
                                <br /><br />
<script type="text/javascript" src="/sll/faces/javax.faces.resource/jsf.js?ln=javax.faces"></script>
<a href="#" style="color: blue" onclick="mojarra.jsfcljs(document.getElementById('entrar'),{'entrar:j_idt38':'entrar:j_idt38'},'');return false">Não consegue acessar a conta?</a></div></div><script id="entrar:j_idt27_s" type="text/javascript">PrimeFaces.cw('Panel','widget_entrar_j_idt27',{id:'entrar:j_idt27'});</script>

Alguma ideia?

6 Respostas

Hebert_Coelho

Tenta fazer um teste.

Coloque esse seus componentes fora desse monte de panel e do layout.

As vezes por colocar um componente dentro do outro, os bugs começam a aparecer. =/

Caso não funcione, post lá no forum do primefaces que eles podem te ajudar, mas posta em inglês. [=

yurimindfreak

jakefrog,

tentei o que você disse porém nada resolveu… deixei apenas com o layout unit e o componente aparece porém na parte de baixo da tela…

ai, troquei o h:panelGrid por p:panelGrid e a borda do componente apareceu e eu pude ver o que pode estar causando o possível bug.

segue abaixo prints do chrome e do internet explorer

Como você pode ver, parece que no internet explorer a coluna 1 do p:panelGrid ocupa a tela inteira, não dando espaço para a coluna 2…

alguma ideia?

Hebert_Coelho

tenta deixar fora do layout. Veja oq acontece.

Você alterou o estilo do primefaces?

yurimindfreak

tirando o <p:layout> o Internet Explorer cria uma barra de rolagem imensa na parte de baixo. e no final dessa barra está o componente perdido.

E eu fiz algumas alterações no CSS. Porém ja testei deixá-los na versão original e o erro continua.

yurimindfreak

RESOLVIDO!

o problema estava nesta linha:

<p:panel style=“padding-left 10%; height: 300px;border: 0px; width: 600px”>

O CSS para Padding Left não funciona no IE… tirei esta informação do p:panel e o componente apareceu corretamente na tela.

Obrigado Jakefrog pela ajuda.

Hebert_Coelho

Vc testou com css original e fora do layout?

Opa, blz então! \o/

Criado 5 de março de 2012
Ultima resposta 6 de mar. de 2012
Respostas 6
Participantes 2