como ocultar un div sin dejar espacios

[oscarbt]

Hola a todos, estoy usando un suggest para una busqueda, los resultados los muestro en un div
Muestro las siguientes imagenes:

Formulario inicial:


Al momento de buscar:


Al seleccionar un resultado (imagen 3):



Como observan al seleccionar un resultado queda un pequeño salto de linea, como puedo evitar ese salto?

Aca el codigo:

Código PHP:

<?php
 
//El formulario (en una tabla):
echo "
<tr>
<td style='vertical-align:top'>
OCUPACION</td>
<td >
<input type='hidden' id='idocupa' ><input type='text' id='ocupacion'  size='30' Onkeyup='buscar() ;'><div id='divocupa'></div>
</td>
</tr>";
 
//la busqueda:
$sql="SELECT ... FROM";
$obj->consulta($sql);
while($row = sqlsrv_fetch_array($obj->result))
echo "<a Onclick=' document.getElementById('idocupa').value='".$row[0]."' ; document.getElementById('ocupacion').value='".trim($row[1])."' ; limpiaunacapa('divocupa'); '>".$row[0]."</a>";
?>
 

la funcion limpiaunacapa:

Código Javascript:

function limpiaunacapa(capa)
{
var lim=document.getElementById(capa);
 lim.innerHTML=" ";    
}
 

Mi pregunta seria entonces, que deberia llevar el div con id=divocupa para evitar que queden esos espacios como se ve en la imagen 3, algun estilo css?

Agradezco la ayuda, muchas gracias...

[lupita100]

Intenta agregar a ese div position:relative; y index100; saludos....

[oscarbt]

Lo coloque asi:

Código HTML:

<div style="position: relative; index:100px;"></div>
 

pero aun sigue el problema, entonces como deberia ser?....gracias

[pitufoweb]

Iniciado por oscarbt

Lo coloque asi:

Código HTML:

<div style="position: relative; index:100px;"></div>
 

pero aun sigue el problema, entonces como deberia ser?....gracias

<div style="display:none;"></div>





saludos

[ZoroRoronoa]

Iniciado por oscarbt

Lo coloque asi:

Código HTML:

<div style="position: relative; index:100px;"></div>
 

pero aun sigue el problema, entonces como deberia ser?....gracias

No conosco alguna propiedad CSS que se llame "index", es z-index, y su valor es un int.

z-index: -1; /* o 999 */

[oscarbt]

pitufoweb
Lo que tu me dices no me sirve, porque entonces no se mostraria el div....

ZoroRoronoa
Efectivamente es z-indez, pero tampoco me sirve, el div queda con espacio.......

[oscarbt]

Pero aca tengo una solucion, implementando jquery para manejar los atributos css desde php:

Código PHP:

$enlace="<a Onclick=' document.getElementById('idocupa').value='".$row[0]."' ; document.getElementById('ocupacion').value='".trim($row[1])."'  ; \$('#divocupa').css({display: 'none'});  ;'>";
 

[ZoroRoronoa]

hay muchas maneras de lograrlo, sin necesidad de js.
Yo anteriormente solo te corregia dicha propiedad.

El div en el cual muestras los resultados, lo puedes mostrar como position absolute, y el input este en relative,para que se situe abajode este, sin que desplaze a los demas inputs.

Con CSS usando focus o hover en el input, lo lograrias.

Saludos.

[oscarbt]

Ok, listo, lo tendre en cuenta, muchas graciass

[tunait]

Lo suyo sería que le agregaras a la función de limpiar una instrucción para cambiarle la propiedad display tal y como te han sugerido

lim.style.display = 'none'; o como poco, inline

habrías de añadir entonces la instrucción que haga lo contrario a la función que escribe el innerHTML