Textarea sin scrollbars

ane_aaron · #1 (**permalink**) 17/10/2005, 10:53

Hola, ¿ Como se le hace para que un textarea no muestre la scroll bar lateral cuando el texto llegue al marco ? Mas o menos algo asi como en la <textarea> que estoy escribiendo este mensaje, que salta automaticamente de linea.

p.d. (Algo medice que esta no es un textarea)

ludovico2000 · #2 (**permalink**) 17/10/2005, 11:31

Creo que es esto lo que necesitas, prueba a ver y dinos si te ha servido o no.

<textarea rows="6" cols="60">

Donde "rows" (6) es el número de filas (alto, si prefieres) y "cols" (60) es el número de columnas (ancho).

leoj90 · #3 (**permalink**) 17/10/2005, 12:19

Cita:

Iniciado por ludovico2000

Creo que es esto lo que necesitas, prueba a ver y dinos si te ha servido o no.

<textarea rows="6" cols="60">

Donde "rows" (6) es el número de filas (alto, si prefieres) y "cols" (60) es el número de columnas (ancho).

Eso no tiene nada q ver, se hace con css:
<textarea cols="20" rows="4" style="overflow: auto;">

ane_aaron · #4 (**permalink**) 17/10/2005, 13:59

Gracias.
Hola, <textarea cols="20" rows="4" style="overflow: auto;"> funciona exelente en explorer, pero no en firefox. ¿Alguien conoce otra forma de hacerlo y que sea mas portable?

CORE · #5 (**permalink**) 17/10/2005, 15:26

textarea{overflow: hidden;}

ane_aaron · #6 (**permalink**) 18/10/2005, 09:18

Gracias pero en firefox tampoco funciona.

furoya · #7 (**permalink**) 18/10/2005, 11:24

Hola todos :

Ayuda con barra de scroll

saludos

furoya

Jorolo · #8 (**permalink**) 18/10/2005, 12:55

1- las cajas de edición de este foro son textarea:
<textarea name="message" id="vB_Editor_001_textarea" rows="10" cols="60" style="width:540px; height:250px" tabindex="1" dir="ltr"></textarea>
Esta es la del editor avanzado.

2- No veo que tenga nada especial en relación al comportamiento de los scrollbars, en Firefox se conporta exactamente igual que un simple:
<textarea rows="10" cols="60"></textarea>

3- No solo eso, se comporta exactamente igual que con:
<textarea cols="20" rows="4" style="overflow: auto;"></textarea>

Me parece que estas haciendo algo mal.

ane_aaron · #9 (**permalink**) 18/10/2005, 14:58

En firefox la caja de texto en vez de saltar de linea automaticamente, despliega la escroll bar de abajo, y aqui no, aqui salto de linea. La caja que tengo es:

<textarea name="message" id="vB_Editor_001_textarea" rows="10" cols="60" style="width:540px; height:250px" tabindex="1" dir="ltr"></textarea>

y tedigo que en firefox no salta se el texto se extiende en linea recta al infinito y mas alla.

ane_aaron · #10 (**permalink**) 18/10/2005, 15:21

En Netscape pasa lo mismo

Jorolo · #11 (**permalink**) 18/10/2005, 16:20

Hagamos una prueba en la caja de texto de respuesta rápida.
Copia y pega el primer párrafo (lo correcto es que se divida en lineas).
Copia y pega el segundo párrafo (lo correcto es que no se divida en lineas)

Párrafo 1
Esto es un texto de prueba (con palabras separadas con espacios) para ver que narices le pasa al amigo ane_aaron con Firefox, las cajas de texto de este foro y el elemento textarea.

Párrafo 2
Esto-es-un-texto-de-prueba-(sin-palabras-separadas-con-espacios)-para-ver-que-narices-le-pasa-al-amigo-ane_aaron-con-Firefox,-las-cajas-de-texto-de-este-foro-y-el-elemento-textarea.

Si me dices que en firefox ambos párrafos causan el mismo efecto enpezaré a pensar en brujas.

ane_aaron · #12 (**permalink**) 19/10/2005, 09:24

Hola, disculpa por hacerte atribular tanto pero me has iliminado. Y he llegado a la siguiente conclucion:

Tanto en Firefox como en Netscape si la longitud de una palabra rebasa el numero de columnas de un textarea que esta configurado para no mostrar la scrollbar hrizontal, esto causara que si muestre dicha scrollbar.

En Explorer, no pasa asi, no importa la longitud de las palabras. La textarea descrita anteriormente, siempre saltara de linea. (No es comercial, solo lo describo).

Gracias otra vez a Jojolo por su paciencia y comprención. Por cierto me encanto esta expresion:

Cita:

Iniciado por Jorolo

para ver que narices le pasa al amigo ane_aaron con Firefox

furoya · #13 (**permalink**) 20/10/2005, 11:14

Hola todos :

El textarea en Firefox se comporta muy raro, especialmente si se envía el contenido. Me he encontrado con casos en que duplica los saltos de línea o los agrega donde no los pusimos. Me recuerda un poco al Notepad XP, que parece no funcionar con virtual wrap como las versiones anteriores.

El tema se mencionó y no se profundizó en

Cual es la diferencia entre virtual y physical ???

y estuve haciendo algunas comparaciones. Si alguien quiere probarlas en otros navegadores con otros doctype se las dejo.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title></title></head><body>

<textarea wrap=" hard " cols="25" rows="3">hard hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
IE : ajusta con/sin espacio y salto.
FF : ajusta con espacio y salto.</textarea>

<textarea wrap=" soft " cols="25" rows="3">soft ssssssssssssssssssssssssssssssss
IE : ajusta con/sin espacio y salto.
FF : ajusta con espacio y salto.</textarea>
<br />
<textarea wrap=" off " cols="25" rows="3">off ooooooooooooooooooooooooooooo
IE : ajusta con/sin espacio y salto.
FF : ajusta con espacio y salto.</textarea>
<br />
<textarea wrap=" virtual " cols="25" rows="3">virtual vvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
IE : ajusta con/sin espacio y salto.
FF : ajusta con espacio y salto.</textarea>

<textarea wrap=" physical " cols="25" rows="3">physical ppppppppppppppppppppppppppp
IE : ajusta con/sin espacio y salto.
FF : ajusta con espacio y salto.</textarea>

<textarea style="white-space: nowrap ; display:block; " cols="25" rows="3">nowrapBlock BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
IE : no ajusta con espacio ni salto.
FF : ajusta con espacio y salto.</textarea>

<textarea style="white-space: pre ; display:block; " cols="25" rows="3">preBlock BBBBBBBBBBBBBBBBBBBBBBBBBBB
IE : ajusta con/sin espacio y salto.
FF : ajusta con espacio y salto.</textarea>

<textarea style="white-space: normal ; display:block; " cols="25" rows="3">normalBlock BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
IE : ajusta con/sin espacio y salto.
FF : ajusta con espacio y salto.</textarea>

<textarea style="white-space: nowrap ;" cols="25" rows="3">nowrap nnnnnnnnnnnnnnnnnnnnnnnnnnnnn
IE : no ajusta con espacio ni salto.
FF : ajusta con espacio y salto.</textarea>

<textarea style="white-space: pre ";  cols="25" rows="3">pre ppppppppppppppppppppppppppppp
IE : ajusta con/sin espacio y salto.
FF : ajusta con espacio y salto.</textarea>

<textarea style="white-space: normal " cols="25" rows="3">normal mmmmmmmmmmmmmmmmmmmmmmmmmmmm
IE : ajusta con/sin espacio y salto.
FF : ajusta con espacio y salto.</textarea>

</body></html>

saludos

furoya

Jorolo · #14 (**permalink**) 20/10/2005, 15:12

Hola furoya.

Puede que Firefox haga cosas raras, pero no más que tú.

1- Tanto da el DTD que uses, no existe el atributo wrap para el elemento textarea ni para ningún otro.

2- En el DOCTYPE de tu ejemplo olvidaste poner el URI del DTD.

3- En los textarea con style se ve que te gusta la variedad:
<textarea style="white-space: nowrap ;" ... - punto y coma antes de las comillas.
<textarea style="white-space: pre "; ... - punto y coma despues de las comillas.
<textarea style="white-space: normal " ... - sin punto y coma.

Lo dejaré aquí por no extenderme, porque en tu código hay por lo menos cuatro errores más.

programeitor · #15 (**permalink**) 20/10/2005, 17:04

En (web developer options - sidebar - edit css) de Firefox hay una casilla remarcable con la leyenda "wrap textarea"

jorolo, esto es un foro ,no una cuadra.

Jorolo · #16 (**permalink**) 21/10/2005, 11:34

Hola programeitor.

Sobre tu comentario:
"En (web developer options - sidebar - edit css) de Firefox hay una casilla remarcable con la leyenda "wrap textarea" "
Gracias por la información, supongo que con ello pretendes rebatir algo de lo que yo he dicho, aunque no veo qué ni cómo ¿Podrías ser más explícito?

Sobre tu segundo comentario:
"jorolo, esto es un foro ,no una cuadra."
Lo mismo, gracias por la información, pero... ¿Por qué lo dices?

programeitor · #17 (**permalink**) 21/10/2005, 12:06

Hola Jorolo, me explico:

lo primero, me parece que llamar "raro" a un contertulio que lo unico que ha hecho es aportar su opinion y experiencias al tema que estamos tratando esta totalmente fuera de lugar. ,sin contar ,con el respeto debido de unos con otros. Ahi lo de la cuadra.

Lo de la "casilla wrap" es una aportacion al tema, la verdad es que no se que funcion tiene, pues no lo he probado, pero me parece que tiene algo que ver.

Espero haber sido explicito. Saludos.

furoya · #18 (**permalink**) 23/10/2005, 13:23

Hola de nuevo :

No creo que Jorolo haya intentado faltarme el respeto, programeitor. Al menos, quisiera creer que no. Pero tampoco está de más recordar de vez en cuando algunas cosas que no se pueden hacer en el foro.

... tiempo atrás me crucé con un "colega" ( aunque peor medicado que yo ) que me dedicó un par de insultos en un mensaje.
Y ésto es algo que pone en una situación complicada a los moderadores.
Por un lado, no pueden permitir que se ofenda a un miembro de la comunidad; y por otro, debe ser difícil tener que evaluar la censura de una idea, no importa en qué términos se exponga.
En ese tema, me apuré a dejar en claro que no me preocupaban los comentarios injuriosos, con lo que daba un poco más de margen a los moderadores para decidir.

( Ahora recuerdo que lo que sí me dolió fue que me hizo ilusionar con dedicarme su escript. Pero cuando abrí el código fuente, el escript estaba, y mi nombre

)

Bueno, vamos a la parte difícil.

No sé bien por dónde empezar, Jorolo, así que tipeo y voy viendo cómo sale.

Seguramente ya viste los enlaces que pusimos JavierB ( Hola! ) y yo, y sabes que el atributo wrap existe para las etiquetas, así que debes estar refiriéndote a CSS.

Cuando aparece un problema, no hay 'un' método para solucionarlo; puede que se hayan escrito "manuales" como guía, pero en la práctica solamente son útiles cuando no se sabe para dónde escapar.
Se puede empezar por cualquier lado, y ahí es donde comienza a tallar la intuición. Pero siempre buscando un patrón que nos permita saber por qué no funciona algo que debería funcionar, o por qué lo hace algo que no debería.

Y una forma es la experimentación. a veces anárquica, a veces absurda, pero siempre revisando el resultado final y tratando de deshacer el camino para encontrar cuándo se produjo el error o el acierto.

Ésto le pasa mucho a los que empiezan con javascript. Hay bastante lógica en la creación de nombres que se pueden inferir de (p.e.) el CSS. Aunque no es el caso -justamente- del CSS, que tiene algunos nombres no muy coherentes.
Pero éso no nos va a impedir intentarlo.

El "ejemplo" que viste más arriba es el comienzo de una prueba, que no seguí por falta de tiempo. Empecé por lo primero que se me ocurrió, y debía seguir con word-wrap , white-space: -moz-pre-wrap , ¿-moz-textarea-wrap? y algún otro, pero en el momento no me los acordaba y no quise perder la oportunidad -muy rara- de experimentar con un Mozilla.

Ya que me tomé el trabajo de escribir el modelo de pruebas, me dio pena borrarlo, y lo postée como estaba por si alguien quería seguirlo. A quien no esté acostumbrado a experimentar, quizá le sirva como uno de los tantos ejemplos de pruebas para encarar un problema.

Está claro que a quien esté educado para seguir los manuales no se le va a ocurrir ver más allá de lo que está escrito; pero hay gente que sabe que cuando la respuesta no es evidente, hay que romper las reglas. Por supuesto, no es cuestión de romper por romper y hay que conocer las reglas antes de romperlas. Pero el componente lúdico siempre es válido. Y divertido.

Aunque wrap no exista en CSS, me plugo empezar por ahí.

Como dijo alguna vez Unamuno :

"Solo el que ensaya lo absurdo es capaz de conquistar lo imposible. No hay más que un modo seguro de dar una vez en el clavo, y es dar ciento en la herradura."

A lo que el amigo Kästner podría objetar :

"Los errores poseen su valor, aunque sólo en alguna ocasión; no todo el mundo que viaja a la India descubre América."

Claro que por algo Don Miguel era español, y Erico Kästner germano.

pero éste comentario parece racista, así que hagamos de cuenta que no dije nada.

Volviendo a lo nuestro, el DTD ni siquiera debía estar ahí, quedó porque lo puso el Firefox ( sin la dirección ) y una prueba es cómo se comporta por default. Así que no le hagas caso.

Y lo de las comillas, y el punto y coma, y ... . No me parece raro. Es sin duda desprolijo. Pero a nadie que haya visto los códigos que posteo le llama hoy la atención. Lo raro sería que no me comiera un signo o hasta una letra

Igual estoy mejorando. Ya cierro los option y los párrafos. Cuando aprenda a poner el tr para una sola fila, ya voy a ser digno de participar en este foro.

saludos

furoya

programeitor · #19 (**permalink**) 23/10/2005, 16:44

En tu ejemplo, Solo Ie acepta esa caracteristica, Ns-Ff(en adelante Nf) "la ignoran" .En cuanto a la casilla wrap de Nf, decir que no afecta para nada en los resultados.

Saludos.

Jorolo · #20 (**permalink**) 24/10/2005, 11:19

Hola a todos.

Solo quiero decir una cosa.

Nunca tuve intención de ofender a nadie, si alguien se ha sentido molesto, siento haber sido la causa.

programeitor · #21 (**permalink**) 24/10/2005, 16:04

Estás disculpado Jorolo.

madelgado · #22 (**permalink**) 25/10/2005, 02:32

Hola a todos!

¿Habeis conseguido solucionarlo?

Diganme que si!

Saludos!

furoya · #23 (**permalink**) 12/02/2006, 11:54

Hola otra vez :

Lo siento, madelgado, es algo que tendrá que corregir cada fabricante.
Pero no creas que me olvidé, seguí haciendo experimentos porque pensé que tal vez se podía "arreglar" del lado cliente con JS; y es absurdo. Hay demasiadas posibilidades de uso a cubrir.

Sin embargo quería agregar algo; en el tema textarea en firefox se ve mal quedé convencido de que Firefox funcionaba como el Notepad XP, o algo parecido. Y que era el método típico de un editor de texto.

Pues no; el comportamiento es realmente lamentable y hay que empezar a presionar para que lo corrijan.

Dejo unas pruebas que hice en quirk mode y en HTML 4.01 Transitional para que las sigan viendo con otros navegadores y doctype .

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<html><head><title></title></head>
<body>

<textarea cols="25" rows="5">
TextoConEspacio32TextoConEspacio32TextoConEspacio32 TextoConEspacio32

TextoConEspacio160TextoConEspacio160TextoConEspacio160*TextoConEspacio160

TextoConGuiónDeCorte173TextoConGuiónDeCorte173*TextoConGuiónDeCorte173

TextoConGuiónDeCorte*173(Rep.)

TextoConPunto46TextoConPunto46TextoConPunto46TextoConPunto46.TextoConPunto46

TextoConGuión45TextoConGuión45TextoConGuión45TextoConGuión45-TextoConGuión45

 !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ*¡¢£¤¥¦§¨©ª«¬*®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ


IE : Corta en espacio 'normal' (32); no corta en nbsp (160); corta en guión de corte (173); no corta en punto decimal; corta en guión común (45).


FF : Corta en espacio 'normal' (32); corta en nbsp (160); no corta en guión de corte (173); no corta en punto decimal; no corta en guión común (45).
</textarea>

<pre> !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ*¡¢£¤¥¦§¨©ª«¬*®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ</pre>

Nota : el guión de separación (<i>soft hyphen</i>) está entre los caracteres <tt>¬*®</tt>.

</body></html>

Como resumen, transcribo el contenido final del textarea

IE : Corta en espacio 'normal' (32); no corta en nbsp (160); corta en guión de corte (173); no corta en punto decimal; corta en guión común (45).

FF : Corta en espacio 'normal' (32); corta en nbsp (160); no corta en guión de corte (173); no corta en punto decimal; no corta en guión común (45).

Puse además la lista de caracteres ASCII para comprobar en cuáles sí corta cada navegador aparte de los que describí.

Ésto salió a partir de un mensaje en el que recomendé el uso de un soft hyphen , que inmediatamente me recordó este problema porque creí que era posible contar los caracteres tomando como referencia el rows para insertar un guión de separación. Luego reconstruiría el texto eliminando los guiones.

Si Firefox los reconociera, claro.

De cualquier forma, como dije al principio, hay demasiadas posibilidades (editar, seleccionar y cortar/copiar) y no pueden cubrirse todas. Dejo las pruebas como inquietud, al igual que las anteriores, por si alguien las quiere seguir.

xmediasoftware · #24 (**permalink**) 11/12/2008, 20:36

hola, yo busco la misma respuesta, creo que hare lo siguiente, crear un div de estilo position:absolute, dentro de otro relativo, utilizar scroll con overflow:hidden, y ya luego vere como hacerle para hacer el scrolling usando javascript

furoya · #25 (**permalink**) 22/01/2009, 08:58

Lo que no entiendo es para qué te va a servir un div adentro del otro. Aunque alguno sea editable, no es un textarea; que es de lo que estamos hablando aquí.

Aprovecho que levantaste el tema para actualizarlo un poco. Resulta que Firefox3.0 (y también Opera9.6) sigue sin ajustar el texto; pero ya hubo algunas mejoras. Para empezar, ahora corta cuando escribimos un guión (común, o de corte), pero no en un espacio de 'no separación'.

Igual, cada vez me convenzo más de que no vale la pena corregir algo que van a arreglar los desarrolladores. Como digo siempre, es cuestión de debatirlo en un foro para que los fabricantes tomen nota. Y después lo parchan.

editor html