Discussoes de Programacao e Tecnologia

Richfaces + HTML +CSS

10 respostas
crpablo
crpablo

Fala ae galerinha...

Estou com um problema meio estranho aqui...

Tenho uma page XHTML que seto o posicionamento dos elementos com css... Quando abro a page está tudo normal, mas quando seleciono uma opção do rich:comboBox, ele perde o posicionamento sozinho, dá um "pulo" pro topo da página...

.combo {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: 40px;
			margin-left: -35px;
		}



<div id="login" align="center" width="606" height="406" valign="middle">
	<table  class="posicao" width="606" height="406">
		<tr>
			<td background="#{facesContext.externalContext.requestContextPath}/images/fundo_login.png"></td>
		</tr>
	</table>
	
	<form method="post" action="j_security_check" id="formSecurity">
		<label class="usuario" style="font: 11px arial">Usuário</label>
		<input  type="text" class="inputUser" size="15" name="j_username" id="j_username" value="#{loginBean.username}"/>
		<label class="senha" style="font: 11px arial">Senha</label>
		<input type="password" class="inputPass" size="15" name="j_password" id="j_password" value="#{loginBean.password}" onkeypress="enviarForm(event, 'formSecurity');"/>
		<label class="local" style="font: 11px arial">Local</label>
		<rich:comboBox styleClass="combo" width="102px" enableManualInput="false" suggestionValues="#{pesquisaBean.local}" defaultLabel="XXX"/>
		<a4j:commandButton action="#" styleClass="rich-button" style="position: absolute; top: 50%; left: 50%; margin-top: 60px; margin-left: #{pesquisaBean.marginButton}; background-position:left top;" value="Entrar" id="botao" onclick="document.getElementById('formSecurity').submit();" />
	</form>
</div>

Alguém tem idéia do que estou fazendo de errado?

Valeu ae...

Abraço

Alura Desenvolvimento Front-End React Do primeiro componente à liderança técnica! HTML/CSS/JavaScript fundamental, React com hooks e...

10 Respostas

crpablo
crpablo

Voltei a fuçar nisso novamente, e nada de encontrar o problema…

Alguém tem alguma sugestão???

Abraço

G
gr_marco

Tive alguns problemas parecidos com isto com o rich:fileupload.
o botão de adicionar novo arquivo sumia da tela, hueahuah!!!
Pedi uma mão pro designer da empresa e o mesmo resolveu corrigindo alguns float s que alguns estilos estavam utilizando.
Mas em sua tela não encontrei nenhum float.

Acontece no IE e no FF?
da uma inspecionada ver se nenhuma classe do proprio richfaces esta sobrepondo os atributos da sua classe.

crpablo
crpablo

gr_marco:
Tive alguns problemas parecidos com isto com o rich:fileupload.
o botão de adicionar novo arquivo sumia da tela, hueahuah!!!
Pedi uma mão pro designer da empresa e o mesmo resolveu corrigindo alguns float s que alguns estilos estavam utilizando.
Mas em sua tela não encontrei nenhum float.

Acontece no IE e no FF?
da uma inspecionada ver se nenhuma classe do proprio richfaces esta sobrepondo os atributos da sua classe.

Cara acontece com o FF, IE, opera… qualquer browser creio eu…

Já tentei ao invés de utilizar o styleClass do richfaces pra setar o css do componente, utilizar direto o style e setar os valores, e mesmo assim fica tudo zuado quando clico no cara…

G
gr_marco

Conhece o plugin FireBug para o Firefox?

Verifica com ele, fazendo o inspect do elemento, se não tem nenhum class do richfaces acima do class que vc criou…

crpablo
crpablo
gr_marco:
Conhece o plugin FireBug para o Firefox?

Verifica com ele, fazendo o inspect do elemento, se não tem nenhum class do richfaces acima do class que vc criou...

Conheço sim cara...

Esse componente do richfaces(rich:comboBox) é dividido em várias partes como dá pra ver no html gerado...

Saca só:

<div id="j_id2">
	<div class="rich-combobox-font rich-combobox " id="j_id2combobox" style="width:102px;position: absolute; top: 50%; left: 50%; margin-top: 40px; margin-left: -35px;">
		<div class="rich-combobox-list-cord">
		</div>
		<div class="rich-combobox-font rich-combobox-shell" style="width:102px;">
			<input autocomplete="off" class="rich-combobox-font-disabled rich-combobox-input-inactive " id="j_id2comboboxField" name="j_id2comboboxField" readonly="true" style="width:92px; " type="text" />
			<input class="rich-combobox-font-inactive rich-combobox-button-background rich-combobox-button-inactive" id="j_id2comboBoxButtonBG" readonly="true" tabindex="-1" type="text" />
			<input class="rich-combobox-font-inactive rich-combobox-button-icon-inactive rich-combobox-button-inactive " id="j_id2comboboxButton" readonly="true" style="; background-image: ;" tabindex="-1" type="text" />
			<div class="rich-combobox-strut rich-combobox-font" style="width:92px">
				Strut
			</div>
		</div>
	<div class="rich-combobox-list-cord " id="j_id2listParent" style="display:none; ; position:absolute;z-index:1000;">
		<div class="rich-combobox-shadow">
			<table border="0" cellpadding="0" cellspacing="0" id="j_id2shadow">
				<tr>
					<td class="rich-combobox-shadow-tl">
						<img alt="" height="1" src="/projeto/a4j/g/3_3_2.CR1images/spacer.gif.jsf" style="border:0" width="10" />
						<br />
					</td>
					<td class="rich-combobox-shadow-tr">
						<img alt="" height="10" src="/projeto/a4j/g/3_3_2.CR1images/spacer.gif.jsf" style="border:0" width="1" />
						<br />
					</td>
				</tr>
				<tr>
					<td class="rich-combobox-shadow-bl">
						<img alt="" height="10" src="/projeto/a4j/g/3_3_2.CR1images/spacer.gif.jsf" style="border:0" width="1" />
						<br />
					</td>
					<td class="rich-combobox-shadow-br">
						<img alt="" height="10" src="/projeto/a4j/g/3_3_2.CR1images/spacer.gif.jsf" style="border:0" width="10" />
						<br />
					</td>
				</tr>
			</table>
		</div>
		<div class="rich-combobox-list-position" id="j_id2listPosition">
			<div class="rich-combobox-list-decoration" id="j_id2listDecoration">
				<div class="rich-combobox-list-scroll" id="j_id2list">
				</div>
			</div>
		</div>
	</div>
	<input autocomplete="off" id="j_id2comboboxValue" name="j_id2" type="hidden" />
</div>
<script type="text/javascript">new Richfaces.ComboBox("j_id2",{'listOptions':{'itemsText':['TESTE','TESTE123'] ,'listWidth':'102px'} ,'fields':{'defaultLabel':'TESTE'} } );
</script>

Essa é a parte do html gerado que monta o componente...

Abraço

G
gr_marco

Então… vrifica pelo firebug, quando inspecionando os divs do combo gerado pelo richfaces, verifica se o seu css não está sendo aplicado antes ao componente. Isto é: se ao lado direito, onde são exibidas as classes e propriedades do componente inspecionado, não há nenhuma classe do richfaces acima da sua.
Se estiver acontecendo, talvez mover a tua classe para um arquivo de css resolva. Eu não sei porque ele sobrepoe com a dele quando escrevo a classe no mesmo xhtml.

crpablo
crpablo

gr_marco:
Então… vrifica pelo firebug, quando inspecionando os divs do combo gerado pelo richfaces, verifica se o seu css não está sendo aplicado antes ao componente. Isto é: se ao lado direito, onde são exibidas as classes e propriedades do componente inspecionado, não há nenhuma classe do richfaces acima da sua.
Se estiver acontecendo, talvez mover a tua classe para um arquivo de css resolva. Eu não sei porque ele sobrepoe com a dele quando escrevo a classe no mesmo xhtml.

Verifiquei e meu css não aparece no firebug, mesmo colocando separado em um arquivo. E o único componente que não aparece o meu css é o rich:comboBox…

Que merd…

Valeu cara

crpablo
crpablo

Tirando o comboBox pra fora do form, o comportamento dele mudou. Ao invés de quando altero valor ele perder o css e ir pro topo da page, ele sai do lugar mas volta instantaneamente.

&lt;html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j"&gt;
	
	&lt;f:loadBundle basename="br.com.xxx.i18n.i18n" var="i18n"/&gt;
	&lt;head&gt;
		&lt;link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/css/layout.css" /&gt;
		&lt;link rel="shortcut icon" href="#{facesContext.externalContext.requestContextPath}/images/icons/logo_neoway.ico" type="image/x-icon"/&gt;
		&lt;script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/xxx.js"/&gt;
	&lt;/head&gt;
	&lt;body onload="try {loginAutomatico('#{loginBean.username}','#{loginBean.password}');} catch (e) {alert(e.message);};"&gt;	
		&lt;div id="login" align="center"&gt;
			&lt;table  class="posicao" width="606" height="406"&gt;
				&lt;tr&gt;
					&lt;td background="#{facesContext.externalContext.requestContextPath}/images/fundo_login.png"&gt;&lt;/td&gt;
				&lt;/tr&gt;
			&lt;/table&gt;
			
			&lt;form method="post" action="j_security_check" id="formSecurity"&gt;
				&lt;label class="usuario" style="font: 11px arial"&gt;Usuário&lt;/label&gt;
				&lt;input type="text" class="inputUser" size="15" name="j_username" id="j_username" value="#{loginBean.username}"/&gt;
				&lt;label class="senha" style="font: 11px arial"&gt;Senha&lt;/label&gt;
				&lt;input type="password" class="inputPass" size="15" name="j_password" id="j_password" value="#{loginBean.password}" onkeypress="enviarForm(event, 'formSecurity');"/&gt;
				&lt;label class="sistema" style="font: 11px arial"&gt;Sistema&lt;/label&gt;
				&lt;a4j:commandButton action="#" styleClass="rich-button" style="position: absolute; top: 50%; left: 50%; margin-top: 60px; margin-left: #{pesquisaBean.marginButton}; background-position:left top;" value="Entrar" id="botao" onclick="document.getElementById('formSecurity').submit();"/&gt;
			&lt;/form&gt;
		&lt;/div&gt;
		&lt;a4j:form&gt;
			&lt;rich:comboBox id="comboSistema" style="position: absolute; top: 50%; left: 50%; margin-top: 40px; margin-left: -35px;"  width="102px" enableManualInput="false" directInputSuggestions="true" value="#{pesquisaBean.sistemaTXT}" suggestionValues="#{pesquisaBean.local}" defaultLabel="PAC"&gt;
				&lt;a4j:support id="eventoSistema" event="onchange" reRender="comboSistema, texto"/&gt;
			&lt;/rich:comboBox&gt;
		&lt;/a4j:form&gt;
	&lt;/body&gt;	
&lt;/html&gt;

Meu problema diminuiu, mas não se resolveu...

Alguma idéia?

Abraço

J
jandilson

crpablo

Posta teu web.xml. Você está usando controle de acesso <security-constraint>? Como está filtrando as requisições no <url-pattern>?

FacaNaCaveira
FacaNaCaveira
crpablo:
Fala ae galerinha...

Estou com um problema meio estranho aqui...

Tenho uma page XHTML que seto o posicionamento dos elementos com css... Quando abro a page está tudo normal, mas quando seleciono uma opção do rich:comboBox, ele perde o posicionamento sozinho, dá um "pulo" pro topo da página...

.combo {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: 40px;
			margin-left: -35px;
		}



&lt;div id="login" align="center" width="606" height="406" valign="middle"&gt;
	&lt;table  class="posicao" width="606" height="406"&gt;
		&lt;tr&gt;
			&lt;td background="#{facesContext.externalContext.requestContextPath}/images/fundo_login.png"&gt;&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/table&gt;
	
	&lt;form method="post" action="j_security_check" id="formSecurity"&gt;
		&lt;label class="usuario" style="font: 11px arial"&gt;Usuário&lt;/label&gt;
		&lt;input  type="text" class="inputUser" size="15" name="j_username" id="j_username" value="#{loginBean.username}"/&gt;
		&lt;label class="senha" style="font: 11px arial"&gt;Senha&lt;/label&gt;
		&lt;input type="password" class="inputPass" size="15" name="j_password" id="j_password" value="#{loginBean.password}" onkeypress="enviarForm(event, 'formSecurity');"/&gt;
		&lt;label class="local" style="font: 11px arial"&gt;Local&lt;/label&gt;
		&lt;rich:comboBox styleClass="combo" width="102px" enableManualInput="false" suggestionValues="#{pesquisaBean.local}" defaultLabel="XXX"/&gt;
		&lt;a4j:commandButton action="#" styleClass="rich-button" style="position: absolute; top: 50%; left: 50%; margin-top: 60px; margin-left: #{pesquisaBean.marginButton}; background-position:left top;" value="Entrar" id="botao" onclick="document.getElementById('formSecurity').submit();" /&gt;
	&lt;/form&gt;
&lt;/div&gt;

Alguém tem idéia do que estou fazendo de errado?

Valeu ae...

Abraço

Fala ai crpablo

me parece que esta faltando a abertura e finalização da tag STYLE no html, pode ser isso?? 
]
&lt;style type="text/css"&gt;
.combo {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: 40px;
			margin-left: -35px;
		}
&lt;/style &gt;
Pois no seu codigo ele esta solto sem nenhuma marcação de tag
Criado 14 de janeiro de 2010
Ultima resposta 14 de out. de 2010
Respostas 10
Participantes 4

Topicos relacionados

Componente de forum 4 respostas Consultar CPF pelo nome na Receita Federal 5 respostas Pegadinhas que se fazem com os pobres estagiários 62 respostas [Resolvido] Como comparar Strings em C? 6 respostas Converter pixels para centímetros 9 respostas
Alura O que é Python? — um guia completo para iniciar nessa linguagem de programação Acesse agora o guia sobre Python e inicie sua jornada nessa linguagem de programação: o que é e para que serve, sua sintaxe e como iniciar nela!
Lumina Lumina: a IA que te traz resultados Prompts prontos por especialistas. Resolva seus problemas de verdade.