Inputs desativados de acordo com o Browser (Erro bizarro)

11 respostas
alanrodrigues

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?

11 Respostas

alanrodrigues

Ninguem…?

javaflex

Se puder poste o HTML e CSS que são renderizados.

alanrodrigues

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;
}
alanrodrigues

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…

alanrodrigues

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?

javaflex

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”?

alanrodrigues

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;
}
alanrodrigues

removi

javaflex

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

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

javaflex

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


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.

Criado 18 de abril de 2013
Ultima resposta 23 de abr. de 2013
Respostas 11
Participantes 2