Utilizo JSF, Spring e Primefaces
Negócio é o seguinte:
Tenho uma página de cadastro de pessoa
Nessa pag tem um panel de Documentos:
<p:panel styleClass="dadosPessoais" header="Endereço">
<h:panelGrid columns="3" styleClass="grid" id="formEnd">
<h:outputStylesheet name="novoFuncionario.css" library="css"></h:outputStylesheet>
<h:outputText value="CEP"></h:outputText>
<p:inputMask id="zipcode" value="#{pessoaBean.pessoa.cep}"
mask="99999-999" styleClass="inputMedio"></p:inputMask>
<p:commandButton value="Buscar" action="#{pessoaBean.encontraCep}"
ajax="true" update="formEnd"></p:commandButton>
<h:outputText value="Logradouro"></h:outputText>
<p:inputText id="rua" value="#{pessoaBean.pessoa.logradouro}"
styleClass="inputMaior"></p:inputText>
<p:inputText value="#{pessoaBean.pessoa.numero}"
styleClass="inputMenor"></p:inputText>
<h:outputText value="Bairro"></h:outputText>
<p:inputText id="bairro" value="#{pessoaBean.pessoa.bairro}"
styleClass="inputMaior"></p:inputText>
<p />
<h:outputText value="Cidade"></h:outputText>
<p:inputText id="cidade" value="#{cidadeBean.cidadeReside.nome}"
styleClass="inputMaior"></p:inputText>
<p />
<h:outputText value="Estado"></h:outputText>
<p:inputText id="estado" value="#{estadoBean.estadoReside.nome}"
styleClass="inputMaior"></p:inputText>
<p />
<h:outputText value="Telefone fixo"></h:outputText>
<p:inputMask id="fixo" value="#{pessoaBean.pessoa.telefoneFixo}"
mask="(099)9999-9999" styleClass="inputMedio"></p:inputMask>
<p />
<h:outputText value="Telefone móvel"></h:outputText>
<p:inputMask id="movel" mask="(099)9999-9999"
value="#{pessoaBean.pessoa.telefoneMovel}"
styleClass="inputMedio"></p:inputMask>
</h:panelGrid>
</p:panel>
(Design tablefull)
Enfim…
O que acontece, é que dependendo do browser, alguns campos estão como se fossem ‘disabled’ (com clique)
Se for passando os inputs com Tab ele vai…
Opera: Pis/pased, Rg, orgao…
Firefox: Reservista, série, categoria…
IE: Nenhum…
Já olhei em firebug, em console dos browsers e nada…
Já troquei os <p:input> por <h:input> e nada tbm…
Mais uma coisa … os panels do prime estão togglable… se eu minimizo algum deles, os inputs antes que pareciam desativados ficam ativos, e outros que estavam ativos ficam desativados…
Alguem tem alguma idéia?
Se puder poste o HTML e CSS que são renderizados.
Este é o panel dos documentos… se eu colocar tudo vai ficar mto grande
<div id="panelDocs" class="ui-panel ui-widget ui-widget-content ui-corner-all dadosPessoais">
<div id="panelDocs_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
<span class="ui-panel-title">Documentos</span>
<a id="panelDocs_toggler" href="javascript:void(0)" class="ui-panel-titlebar-icon ui-corner-all ui-state-default">
<span class="ui-icon ui-icon-minusthick"></span>
</a>
</div>
<div id="panelDocs_content" class="ui-panel-content ui-widget-content">
<table>
<tbody>
<tr>
<td>
<span class="inputMedio">CPF</span>
</td>
<td>
<input id="j_idt70" name="j_idt70" type="text" class="ui-inputfield ui-inputmask ui-widget ui-state-default ui-corner-all inputMedio" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>PIS/PASEP</td>
<td>
<input id="j_idt78" name="j_idt78" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>RG</td>
<td>
<input id="j_idt86" name="j_idt86" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all inputMedio" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
</td>
<td>Órgão</td>
<td>
<div id="j_idt88" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all ui-helper-clearfix" style="width: 52px;">
<div class="ui-helper-hidden-accessible">
<select id="j_idt88_input" name="j_idt88_input">
<option value="1">SSP</option>
</select>
</div>
<label id="j_idt88_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all" style="width: 36px;">SSP</label>
<div class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
<span class="ui-icon ui-icon-triangle-1-s"></span>
</div>
</div>
</td>
<td>UF</td>
<td>
<div id="estadoRg" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all ui-helper-clearfix" style="width: 65px;">
<div class="ui-helper-hidden-accessible">
<select id="estadoRg_input" name="estadoRg_input">
<option value="" selected="selected">Estado</option>
<option value="1">AC</option>
<option value="2">AL</option>
<option value="3">AM</option>
<option value="4">AP</option>
<option value="5">BA</option>
<option value="6">CE</option>
<option value="7">DF</option>
<option value="8">ES</option>
<option value="9">GO</option>
<option value="10">MA</option>
<option value="11">MG</option>
<option value="12">MS</option>
<option value="13">MT</option>
<option value="14">PA</option>
<option value="15">PB</option>
<option value="16">PE</option>
<option value="17">PI</option>
<option value="18">PR</option>
<option value="19">RJ</option>
<option value="20">RN</option>
<option value="21">RO</option>
<option value="22">RR</option>
<option value="23">RS</option>
<option value="24">SC</option>
<option value="25">SE</option>
<option value="26">SP</option>
<option value="27">TO</option>
</select>
</div>
<label id="estadoRg_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all" style="width: 49px;">Estado</label>
<div class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
<span class="ui-icon ui-icon-triangle-1-s"></span>
</div>
</div>
</td>
<td>Data</td>
<td>
<span id="j_idt93">
<input id="j_idt93_input" name="j_idt93_input" type="text" class="ui-inputfield ui-widget ui-state-default ui-corner-all hasDatepicker" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
</span>
</td>
</tr>
<tr>
<td>Titulo Eleitoral</td>
<td>
<input id="j_idt95" name="j_idt95" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all inputMedio" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
</td>
<td>Zona</td>
<td>
<input id="j_idt97" name="j_idt97" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all inputMenor" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
</td>
<td>Seção</td>
<td>
<input id="j_idt99" name="j_idt99" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all inputMenor" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
</td>
<td>UF</td>
<td>
<div id="estadoTitulo" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all ui-helper-clearfix" style="width: 65px;">
<div class="ui-helper-hidden-accessible">
<select id="estadoTitulo_input" name="estadoTitulo_input">
<option value="" selected="selected">Estado</option>
<option value="1">AC</option>
<option value="2">AL</option>
<option value="3">AM</option>
<option value="4">AP</option>
<option value="5">BA</option>
<option value="6">CE</option>
<option value="7">DF</option>
<option value="8">ES</option>
<option value="9">GO</option>
<option value="10">MA</option>
<option value="11">MG</option>
<option value="12">MS</option>
<option value="13">MT</option>
<option value="14">PA</option>
<option value="15">PB</option>
<option value="16">PE</option>
<option value="17">PI</option>
<option value="18">PR</option>
<option value="19">RJ</option>
<option value="20">RN</option>
<option value="21">RO</option>
<option value="22">RR</option>
<option value="23">RS</option>
<option value="24">SC</option>
<option value="25">SE</option>
<option value="26">SP</option>
<option value="27">TO</option>
</select>
</div>
<label id="estadoTitulo_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all" style="width: 49px;">Estado</label>
<div class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
<span class="ui-icon ui-icon-triangle-1-s"></span>
</div>
</div>
</td>
</tr>
<tr>
<td>CTPS</td>
<td>
<input id="j_idt103" name="j_idt103" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all inputMedio" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
</td>
<td>Série</td>
<td>
<input id="j_idt105" name="j_idt105" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all inputMenor" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
</td>
<td>Data</td>
<td>
<span id="j_idt107" class="inputMedio">
<input id="j_idt107_input" name="j_idt107_input" type="text" class="ui-inputfield ui-widget ui-state-default ui-corner-all hasDatepicker" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
</span>
</td>
<td>UF</td>
<td>
<div id="estadoCtps" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all ui-helper-clearfix" style="width: 65px;">
<div class="ui-helper-hidden-accessible">
<select id="estadoCtps_input" name="estadoCtps_input">
<option value="" selected="selected">Estado</option>
<option value="1">AC</option>
<option value="2">AL</option>
<option value="3">AM</option>
<option value="4">AP</option>
<option value="5">BA</option>
<option value="6">CE</option>
<option value="7">DF</option>
<option value="8">ES</option>
<option value="9">GO</option>
<option value="10">MA</option>
<option value="11">MG</option>
<option value="12">MS</option>
<option value="13">MT</option>
<option value="14">PA</option>
<option value="15">PB</option>
<option value="16">PE</option>
<option value="17">PI</option>
<option value="18">PR</option>
<option value="19">RJ</option>
<option value="20">RN</option>
<option value="21">RO</option>
<option value="22">RR</option>
<option value="23">RS</option>
<option value="24">SC</option>
<option value="25">SE</option>
<option value="26">SP</option>
<option value="27">TO</option>
</select>
</div>
<label id="estadoCtps_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all" style="width: 49px;">Estado</label>
<div class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
<span class="ui-icon ui-icon-triangle-1-s"></span>
</div>
</div>
</td>
</tr>
<tr>
<td>Reservista</td>
<td>
<input id="j_idt111" name="j_idt111" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all inputMedio" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
</td>
<td>Série</td>
<td>
<input id="j_idt113" name="j_idt113" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all inputMedio" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
</td>
<td>Categoria</td>
<td>
<input id="j_idt115" name="j_idt115" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all inputMedio" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
</td>
<td>Data</td>
<td>
<span id="j_idt117">
<input id="j_idt117_input" name="j_idt117_input" type="text" class="ui-inputfield ui-widget ui-state-default ui-corner-all hasDatepicker" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
</span>
</td>
</tr>
<tr>
<td>CNH</td>
<td>
<input id="j_idt119" name="j_idt119" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all inputMedio" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
</td>
<td>Data</td>
<td>
<span id="j_idt121">
<input id="j_idt121_input" name="j_idt121_input" type="text" class="ui-inputfield ui-widget ui-state-default ui-corner-all hasDatepicker" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
</span>
</td>
<td>Categoria</td>
<td>
<input id="j_idt123" name="j_idt123" type="text" class="ui-inputfield ui-inputmask ui-widget ui-state-default ui-corner-all inputMedio" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<input type="hidden" id="panelDocs_collapsed" name="panelDocs_collapsed" value="false">
</div>
O css nao tem qse nada
@CHARSET "ISO-8859-1";
.dadosPessoais{
text-align: center;
margin: 0px auto;
width: 80%;
font-size: 12px;
}
.grid{
text-align: left;
margin: 0px auto;
}
.inputMaior{
width: 160px !important;
}
.inputMedio{
width: 100px !important;
}
.inputMenor{
width: 40px !important;
}
#panelEventos{
margin: 0px auto;
border: 0px !important;
width: 80%;
}
#panelEventos_content{
margin: 0px auto;
border: 0px !important;
text-align: center;
}
.botao{
font-size: 13px;
}
Reparei outra coisa agora…
Os inputs que ficam desativados, estão sempre da mesma altura…
ou seja
panel1
input1
input2
panel2
input3
input4
Supondo que o input1 esteja desativado, quando minimizo o panel1, o input 3 fica desativado…
Aparentemente o erro está na div content, pois os inputs desativados ficam exatamento no bottom da div…
CSS:
#content {
height: auto !important;
padding-top: 5px;
padding-bottom: 0px;
background-image: url("/MPCMS/resources/images/simbolo.gif");
background-repeat: no-repeat;
background-position: 50%;
}
Alguem ve algum erro ai?
Fiz um teste do que você passou aqui: http://jsfiddle.net/dGdyT/ e o problema não foi reproduzido, pode ser algo mais que o JSF/Primefaces tenha gerado. Testei em: Chrome 28.0.1478.0 dev-m, FireFox 20.0.1 e IE 9. Não tenho Opera.
Sobre esse estilo para id #content, onde está este elemento no HTML com id “content”?
está no template…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title><ui:insert name="title"></ui:insert> :: Ficha Funcional - MPC/MS</title>
<link rel="shortcut icon" type="image/x-icon" href="#{request.contextPath}/resources/images/favicon.ico" />
</h:head>
<h:body>
<h:outputStylesheet name="template.css" library="css"></h:outputStylesheet>
<div id="header">
<p:graphicImage value="/resources/images/titulo.png"></p:graphicImage>
<ui:insert name="header">
</ui:insert>
</div>
<div id="content">
<div id="left">
<h:form>
<div id="left_links">
<h:commandLink value="Pesquisar" action="home"></h:commandLink>
<p />
<h:commandLink value="Cadastrar Funcionário"
action="novoFuncionario"></h:commandLink>
<p />
</div>
</h:form>
</div>
<div id="central">
<ui:insert name="content">
</ui:insert>
</div>
</div>
<div id="footer">
<ui:insert name="footer">
</ui:insert>
</div>
</h:body>
</html>
e o template.css
@CHARSET "ISO-8859-1";
html {
height: 100%;
}
body {
padding: 0px;
margin: 0px;
height: 100%;
}
#header {
background-image: url("/MPCMS/resources/images/backbodyfooter.png");
background-repeat: repeat-x;
height: 100px;
margin: 0px;
padding: 0px;
text-align: center;
}
#titulo {
font-family: Garamond, serif;
line-height: 1em;
color: #FFFFFF;
font-weight: bold;
font-size: 50px;
text-shadow: 0px 0px 0 rgb(231, 231, 231), 1px 1px 0 rgb(216, 216, 216),
2px 2px 0 rgb(202, 202, 202), 3px 3px 0 rgb(187, 187, 187), 4px 4px 0
rgb(173, 173, 173), 5px 5px 0 rgb(158, 158, 158), 6px 6px 0
rgb(144, 144, 144), 7px 7px 6px rgba(0, 0, 0, 0.6), 7px 7px 1px
rgba(0, 0, 0, 0.5), 0px 0px 6px rgba(0, 0, 0, .2);
}
#content {
height: auto !important;
padding-top: 5px;
padding-bottom: 0px;
background-image: url("/MPCMS/resources/images/simbolo.gif");
background-repeat: no-repeat;
background-position: 50%;
}
#left {
width: 200px;
height: 460px;
-webkit-border-radius: 0px 20px 20px 0px;
-moz-border-radius: 0px 20px 20px 0px;
border-radius: 0px 20px 20px 0px;
border: 1px solid #CFCFCF;
background-color: #FFFFFF;
-webkit-box-shadow: #B3B3B3 7px 7px 7px;
-moz-box-shadow: #B3B3B3 7px 7px 7px;
box-shadow: #B3B3B3 7px 7px 7px;
text-align: center;
margin-bottom: 20px;
margin-top: 20px;
float: left;
}
#left_links {
padding: 80% 0;
}
#central {
width: 70%;
height: 460px;
margin: 20px auto;
text-align: center;
}
#footer {
cbackground-image: url("/MPCMS/resources/images/backbodyfooter.png");
background-repeat: repeat-x;
height: 70px;
margin: 0px;
position: absolute;
bottom: 0;
text-align: center;
bottom: 0;
width: 100%;
}
a:LINK {
color: #000;
text-decoration: none;
}
a:HOVER {
text-decoration: underline;
}
Minha máquina tá abrindo o bico com esse post :), procure postar coisas pesadas em link externo. Eu testei aqui e não foi reproduzido também: http://jsfiddle.net/tUqPB/ O campo Reservista fica desabilitado no FireFox né? No teste que fiz não ficou. Então algo mais que o JSF/Primefaces esteja gerando, não tem javascript nesse rolo?
Pode ser coincidência e não ter nada haver, mas tem outras pessoas reclamando sobre disable x JSF, como aqui: http://www.guj.com.br/java/298403-problema-com-disable-jsf
kkkkk… a minha tbm…rsrs
foi mal…
Não é a mesma coisa do outro topico pois meu input fica com disabled false;… mas mesmo assim nao da pra clicar…
enfim… vou fazer um layout novo… espero que de certo…
Obrigado pela ajuda cara…
abçs
[quote=alanrodrigues]kkkkk… a minha tbm…rsrs
foi mal…
Não é a mesma coisa do outro topico pois meu input fica com disabled false;… mas mesmo assim nao da pra clicar…
enfim… vou fazer um layout novo… espero que de certo…
Obrigado pela ajuda cara…
abçs
[/quote]
Boa, muitas coisas “bizarras” são mais facilmente resolvidas refazendo e trazendo as coisas que estavam prontas ao poucos, ate descobrir o ponto que causou problema. Como JSF perde-se o controle natural do resultado, acontece isso mesmo.