Hacer que un div crezca hacia la izquierda, no a la derecha.

[arianna_rr]

Buenas tardes,

tengo el siguiente div

<div id="div_1" style="display:none; position:absolute; "></div>

en el que imprimo información devuelta de una tabla de base de datos mediante AJAX en forma de lista, algunas cadenas son cortas y otras largas, ese div va debajo de un input de width: 145px.

Cuando la cadena que se imprime tiene un width más grande que el del input necesito que el div crezca hacia la izquierda y no hacia la derecha como es lo normal, esto es porque esa búsqueda se encuentra en la parte derecha de mi página y cuando salen varias filas de datos las palabras no se ven completas, es necesario usar el scroll de la página para poder ver la cadena completa, en el div no debe verse el scroll. Entonces el requerimiento es que los datos se vean completos sin tener que usar ni uno ni otro scroll.

Agradecería infinitamente sus aportes, esta es la primera vez que escribo para pedir ayuda, este foro me ha sido de gran utilidad. Espero poder hacer aportes en tanto pueda.

[C2am]

Hola

Simplemente define la position absolute con right, en vez de left, que es lo que supongo que has hecho, aunque no muestras esto en el código que muestras.

Código HTML:

<div id="div_1" style="display:none; position:absolute; right: 5px; "></div>
 

Esto hará que se mantenga a 5px desde la derecha de su contenedor (o ancestro que tenga definida la position en forma explícita), y crecerá hacia la izquierda.

Prueba poniendo primero left:nnpx, y luego right:nnpx y te darás cuenta.

Ejemplo: http://jsfiddle.net/c2am/bRqNT/8/embedded/result/

Saludos

[arianna_rr]

Hola, ya lo logré!!!

El div contenedor quedó así

Código HTML:

<div id="div_1" style="display:none; position:absolute;"></div>
 

Porque si a ese le fijo un right o left con position:absolute entonces se queda en posición absoluta sobre mi página y no se mantiene debajo del input donde introduzco mi criterio de búsqueda, sino que se mueve si redimensiono la ventana del navegador.

Entonces fue al div que imprimo con AJAX al que me tocó hacerle las respectivas modificaciones

Código HTML:

<div style="height:<?php echo $height;?>;overflow-x:hidden;overflow-y:auto;border: 1px solid #aaaaaa; position: absolute; right:-148px ">
Dato 1
Datos 2 impreso
Datos
Muchos más datos
</div>
 

Eso se debe ver debajo del input de width:145px, si al segundo div le asigno right:0px entonces la lista se desplega del inicio del input hacia la izquierda, entonces tuve que ponerle ese valor negativo para que empiece a mostrarse desde el fin del input hacia la izquierda.