Headache formatting textarea--need to suppress scrollbars?

[jsteph]

Hi all,
I have a text area, and I want have two key requirements:
1. No scrollbars.
2. Fixed size.

Yet with the above, I also I want the text to wrap and, when there's more text than will fit in the fixed size, I want that text to exist below the visible area, and be able to be made visible by putting the mouse in the field and 'find' the rest of the text by selecting or using arrow keys.

I can't seem to get this to work using any of the Overflow attributes.

The text-type Input tag allows the text to be hidden and 'findable', but will not wrap. If the text-type input would wrap, that would work perfectly instead of Textarea.

Bottom line is I can't have the above requirements in one package--but I've seen it on other sites and it seems pretty basic. Can anyone help?
Thanks,
--Jim

 

[vacunita]

Do you really want a text area? Are your users going to write in this area, or is it just to display text, but will not need to take any input?

If they are not going to write, then maybe a div with overflow hidden may do what you want.

If they are going to write into it, then having part of what they write hidden may complicate the action.

But if you really want a text area then you'll likely need some Javascript that hides the scroll bars.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[jsteph]

vacunita,
No, I don't need a textarea, just a display-only but with the ability to put the cursor in the field and select the data, even the hidden stuff.

I'll give the Div a try,
--Jim

 

[vacunita]

You can then use JSA. or you can try to fake it something like this should yield something along the lines of what you want.

Tested in both FF3 and IE7.

<div id=wrapper style="background-color:#5544AA; width:450px; height:200px; overflow:hidden;"><div id="myscrollabletextarea" style="text-align: justify; padding-right:10px; padding-left:10px; height:98%; width:100%; overflow:auto;">[green]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent consectetuer sem at justo. Ut sed nisi. Integer nec mauris id lectus malesuada laoreet. Curabitur eget dui. Integer ipsum magna, euismod a, imperdiet id, varius nec, eros. Aliquam neque leo, aliquam molestie, pulvinar in, dignissim at, tortor. Suspendisse odio augue, pharetra vitae, consectetuer quis, tempus eu, augue. Donec auctor. Nullam mattis dolor rhoncus metus. Donec id justo. Sed gravida dui sed sem.

Vivamus faucibus magna vel nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam enim ipsum, blandit ut, luctus vel, aliquam vitae, augue. Cras nisi purus, porttitor vel, egestas non, mollis a, neque. Cras posuere. Maecenas luctus. Maecenas egestas iaculis libero. Praesent fringilla euismod lectus. Morbi vulputate, massa et malesuada commodo, arcu arcu iaculis urna, eu posuere nisl nibh sit amet sapien. Phasellus ornare. Pellentesque mauris purus, tempus at, fringilla et, sollicitudin non, tortor. Aliquam sodales viverra neque. Ut porta, felis non placerat mollis, lacus ipsum molestie elit, vel tincidunt urna quam id diam. Nunc congue justo ultrices mauris.

Aliquam erat volutpat. Nunc turpis velit, iaculis ut, auctor ac, euismod at, neque. Pellentesque eget elit. Morbi justo tortor, aliquet ut, pharetra non, sodales vitae, arcu. In interdum ante eu nibh. Donec pellentesque condimentum massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce nunc lacus, molestie id, scelerisque sit amet, congue vitae, erat. Maecenas id mauris et sapien consectetuer egestas. Praesent euismod pulvinar ante. Sed ut velit. Mauris sed erat. Pellentesque odio odio, rutrum pretium, aliquam et, scelerisque et, elit.

Nunc quam justo, volutpat eu, gravida vitae, imperdiet et, erat. Quisque erat nisl, laoreet non, viverra eget, auctor non, mauris. Duis rhoncus luctus turpis. Fusce imperdiet. Curabitur rutrum nunc mattis justo. Donec tincidunt dapibus magna. In cursus porttitor magna. Fusce imperdiet. Duis pellentesque. Praesent id urna. Nam eleifend tempor elit. Phasellus porttitor. Nullam posuere ante eu mi. Integer egestas diam id lacus. Aenean lorem neque, imperdiet eu, lobortis ut, auctor id, tellus. Vivamus sit amet felis. In vitae neque non odio ultrices commodo. Vivamus aliquam consectetuer nisl. [/green]
</div></div>

The principle here is to use the outer div to hide the inner div's scroll bar.




----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.