Richfaces + HTML +CSS

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

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

Alguém tem alguma sugestão???

Abraço

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.

This message was edited 1 time. Last update was at 27/01/2010 17:10:00

gr_marco wrote: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...

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

gr_marco wrote: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

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.

gr_marco wrote: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

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.

<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">
	
	<f:loadBundle basename="br.com.xxx.i18n.i18n" var="i18n"/>
	<head>
		<link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/css/layout.css" />
		<link rel="shortcut icon" href="#{facesContext.externalContext.requestContextPath}/images/icons/logo_neoway.ico" type="image/x-icon"/>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/xxx.js"/>
	</head>
	<body onload="try {loginAutomatico('#{loginBean.username}','#{loginBean.password}');} catch (e) {alert(e.message);};">	
		<div id="login" align="center">
			<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="sistema" style="font: 11px arial">Sistema</label>
				<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>
		<a4j:form>
			<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">
				<a4j:support id="eventoSistema" event="onchange" reRender="comboSistema, texto"/>
			</rich:comboBox>
		</a4j:form>
	</body>	
</html>

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

Alguma idéia?

Abraço

What is classpath? Membro desde: 21/07/2010 08:34:57 Mensagens: 5 Offline

crpablo

Posta teu web.xml. Você está usando controle de acesso ? Como está filtrando as requisições no ?

crpablo wrote: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

Fala ai crpablo

me parece que esta faltando a abertura e finalização da tag STYLE no html, pode ser isso??

Pois no seu codigo ele esta solto sem nenhuma marcação de tag

Notícias, artigos e o maior fórum brasileiro sobre Java