[Resolvido] Posicionamento do auto completar

[flavialieggio 0]

Ola pessoal

 

Estou com um problema de posicionamento da select multiple que faz parte do auto completar que tenho... O script que uso foi feito pelo Micox que me ajudou bastante quando estava precisando.. mas agora nao sei o que aconteceu , a select ta fora de posicionamento.. ja tentei mexer no css de varias formas e nao tive sucesso... abaixo vai a imagem do que esta acontecendo... ^_^

 

 

Codigos:

css:

#pagina {
  position:absolute; /* isso aqui tem que ficar */
  border:1px solid green;
  height:120px;
  visibility:hidden;
}
#tudo {
  width:550px;
  background-color:#f7f7f7;
  font-size:10px;  
  font-weight: bold;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
#nome {
  width:250px;
}

pagina.php

<td>Selecionar Usuário:</td>
<td>
  <div id="tudo">
  <input type="text" id="nome" name="nome" onKeyUp="pesquisa(event,this.value)" />
  <select name="pagina" id="pagina" onkeyup="altera(event,this)" onBlur="alteraReal(this)" size="4">
  </select>
  </div>
</td>

Galerinha desde ja agradeço a atenção de vces!! Preciso mesmo de ajuda!!!

[flavialieggio 0]

Ola pessoal...

 

Isto nao e um flood... mas descobri que isso acontece porque a parte da busca dinamica esta dentro de table..... fora dela funciona legal... mas como fazeer pra respeitar dentro da table??

 

[]´s!!!

[Paulo de Tarso F. M. 24]

Não tem como disponibilizar um link não? :mellow: Porque avaliar só esse trecho de código muitas vezes não ajuda a resolver o problema, pois outros elementos/formatações podem estar interferindo também...

 

Precisamos "avaliar o cenário" por inteiro...

 

É possível?

[flavialieggio 0]

Ola Paulo,

na verdade nao tenho como disponibilizar pois so trabalho com acesso interno.... não cnsigo ter um link externo....

[William Bruno 1501]

Bom.. uma coisa que você precisa é definir o top e o left no mínimo do teu #pagina. Ai você verá onde está posicionando..

comece com:

#pagina {
  position:absolute; /* isso aqui tem que ficar */
  top: 0; /* vai ajustando até sair de cima do input */
  left: 0;
  border:1px solid green;
  height:120px;
  visibility:hidden;
}

E para isso, você precisa q esse container, tenha um relative ao menos.

Algo como:

<td>Selecionar Usuário:</td>
<td style="position: relative">
  <div id="tudo">

Ou:

#tudo {
  width:550px;
  position: relative; /* contexto para o outro elemento */
  background-color:#f7f7f7;
  font-size:10px;  
  font-weight: bold;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

[flavialieggio 0]

Ola Willian!

 

Então adicionei as 3 sugestões e ai sim funcionou super certo tanto no IE quanto no FF!!

a diferenca e que aqui:

#pagina {
  position:absolute; /* isso aqui tem que ficar */
  top: 0; /* vai ajustando até sair de cima do input */
  left: 0;
  border:1px solid green;
  height:120px;
  visibility:hidden;
}

deixei assim:

#pagina {
  position:absolute; /* isso aqui tem que ficar */
  border:1px solid green;
  height:120px;
  visibility:hidden;
}

E para isso, você precisa q esse container, tenha um relative ao menos.

Eu havia lido algo sobre, mas não havia entendido ou raciociando sobre isso... Então qdo temos um objeto em position: absolute, o de referencia tem que ter a proriedade relative... algo assim????

 

Muito obrigada mais uma vez pelo apoio Willian e pessoal!!!!!

[]´s flávia

[William Bruno 1501]

Sim, exatamente.

Um elemento com position absolute, procura um ancestral com position explicitamente declarado para se posicionar apartir dele..

como na tua árvore os anteriores mais próximos não tinham, provavelmente, ele foi atrás do BODY(esse tem um relative por default).

 

todos os elementos possuem um position: static; mas esse não oferece um contexto para o position absolute.

 

 

http://www.cssnolanche.com.br/diferenca-en...solute-e-fixed/

http://www.barelyfitz.com/screencast/html-...ss/positioning/

 

Dá uma olhada em alguns materiais por ai... é importante que você entenda a diferença entre os positions.

:lol:

[flavialieggio 0]

Ola Willian,

 

Eu li anteriormente alguns artigos falando dos 4 tipos de position... mas nao havia realmente entendido esse ponto!!! ^_^

 

Muito obrigada mesmo!!!!! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

[]´s flávia