Problema de css con autocomplete

ananda · #1 (**permalink**) 30/08/2012, 15:54

Hola, estoy usando jquery para hacer el efecto de autocompletar en un input pero no me funciona ya que el input está encima de un div 'marco' que contiene casi toda la página, y he visto que el array le llega al input pero no se me abre la bandeja de sugerencias al escribir, he hecho lo mismo en una página en blanco y me funciona a la perfección. Os dejo los códigos:

html

Código PHP:

              <div id="marco"> 
 
    <div id="styli"><form action="recibe.php" method="post" class="style"> 
    <input id="tags" name="tags" placeholder="Buscar" class="search" /> 
    <input name="ir" type="submit" value="IR" id="ir" /> 
</form></div> 
 
</div>

css general

Código PHP:

  #marco{ 
background-color: #EBEBEB; 
border: #22B14C solid 3px; 
padding-bottom: 50px; 
padding-left: 10px; 
padding-right: 10px; 
padding-top: 10px; 
position: relative; 
left: 358px; 
top: 45px; 
z-index: 1; 
margin-left: 3px; 
width: 1128px; 
} 
 
#styli{ 
    position: relative; 
    z-index: 8; 
    display: inline; 
}

Y este es el CSS que el efecto jQuery trae por defecto:

Código PHP:

   
 
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 14px; }/*tamaño de la letra  */ 
.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee/*linea del cuadro  */ url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; } 
.ui-widget-content a { color: #999; }/*color de la letra  */ 
 
 
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, 
/*muestra el efecto naranja */  
.ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #fbcb09; background:  #3C9 url(images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x; font-weight: lighter; color:  #660; }/*color de la letra  */ 
/*borde al momento de seleccionarlo */ 
 
 
.ui-autocomplete { position: absolute; cursor: default; }     
 
* html .ui-autocomplete { width:1px; } /* tamaño del menu desplegable*/ 
 
.ui-menu {/*acomoda  */ 
    list-style:none;/*esto agrega viñetas*/ 
    padding: 3px; 
    margin: 1; 
    display: compact; 
    float: right; 
} 
.ui-menu .ui-menu-item a {/*rellena toda la fila */ 
    text-decoration:none; 
    display:block; 
    padding:.2em .4em; 
    line-height:1; 
    zoom:1;

el jQuery es este por si alguien quiere probarlo

Código PHP:

  
<head> 
 
        <link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.13.custom.css" type="text/css" media="screen" /> 
 
  <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> 
  <script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script> 
 
 
  <script type="text/javascript"> 
     
    $(function() { 
        <?php 
                 
        while($intime= mysql_fetch_array($query5)) { 
      $elementos[]= '"'.$intime['nombre'].'"'; 
       
} 
$arreglo= implode(", ", $elementos);//junta los valores del array en una sola cadena de texto 
        ?>     
         
        var availableTags=new Array(<?php echo $arreglo; ?>);//imprime el arreglo dentro de un array de javascript 
                 
        $( "#tags" ).autocomplete({ 
            source: availableTags 
        }); 
    }); 
         
 
  </script>

Debe ser un problema de los position y los z-index pero no lo consigo ver, ojalá me podáis ayudar, muchas gracias por adelantado!!

carlospc · #2 (**permalink**) 01/09/2012, 19:39

Y si le agregas z-index al css del widget? pruebalo y nos comentas