Prev: Active menu items in ul/li hierarchy (breadcrumb)
Next: Menu Bar not inside its containing div
From: M.L. on 1 May 2010 03:09

I created an HTML invoice form that works well except for the
area where I enter the item description. I'd like a CSS solution that
will allow my description column to autowrap and expand vertically as
I type within the cell. I'd like the entirety of my text to be visible
within that cell for printing.

I expected this to be a Javascript issue, but was told in that
newsgroup that it could be done with CSS. So I'm hoping someone here
can help. Thanks.
From: dorayme on 1 May 2010 03:58
In article <4cknt51j0tij8ho14vpnpqlr2gnlnt13nl(a)4ax.com>,
M.L. <me(a)privacy.invalid> wrote:

> I created an HTML invoice form that works well except for the
> area where I enter the item description. I'd like a CSS solution that
> will allow my description column to autowrap and expand vertically as
> I type within the cell. I'd like the entirety of my text to be visible
> within that cell for printing.
>
> I expected this to be a Javascript issue, but was told in that
> newsgroup that it could be done with CSS. So I'm hoping someone here
> can help. Thanks.

URL?

--
dorayme
From: Ben C on 1 May 2010 05:34
On 2010-05-01, M.L <me(a)privacy.invalid> wrote:
>
> I created an HTML invoice form that works well except for the
> area where I enter the item description. I'd like a CSS solution that
> will allow my description column to autowrap and expand vertically as
> I type within the cell. I'd like the entirety of my text to be visible
> within that cell for printing.
>
> I expected this to be a Javascript issue, but was told in that
> newsgroup that it could be done with CSS. So I'm hoping someone here
> can help. Thanks.

I don't think you can do that without Javascript. If you do use
Javascript you could use the keypress handler to append text to a
normal-flow block. It will autowrap and expand vertically as the browser
reflows it. You'll also need a bit more JS to copy the text into a real
form element so it gets submitted.

Then you'll probably want to rig up a caret. You'll also need delete,
moving around, and selection. Writing a whole text editor in Javascript
is rather a lot of work, and even then it sucks, because people won't be
able to paste text into it.

A simpler way to do this might be just to have an ordinary form but
after it's submitted you give the user back a page that's more
printer-friendly, with the text they entered all visible somewhere.
From: Jukka K. Korpela on 1 May 2010 09:26
M.L. wrote:

> I created an HTML invoice form that works well except for the
> area where I enter the item description. I'd like a CSS solution that
> will allow my description column to autowrap and expand vertically as
> I type within the cell.

That differs from the problem description you gave in comp.lang.javascript:
"My problem is that the table's input form field only widens to about 75% of
the column width.
Even worse, when I print the form it only shows the text within the visible
input area."
That looks pretty much something you should handle with CSS.

Your problem seems to be a moving target, and it's quite probable that
neither of the descriptions matches your real problem. If you had just
posted a URL, you might already have the correct answer to the right
question.

If you don't even know that CSS cannot do things _as the user types input
data_, you must be rather confused. It's quite possible that your only
_real_ problem that that textarea content may not get printed.

After all, on screen, a textarea is scrollable as needed, and with CSS, you
can make it as large as possible (given the other content on the page). This
should not pose a problem to a user, as that's how millions of forms work on
web pages - though most of them might have too small dimensions for
textareas, but you need not imitate that.

_Printing_ textarea content is problematic, and there's something you can do
about that in CSS, but it's really the wrong approach. You should normally
not expect a page with a form to be printable so that form input gets
properly printed. Instead, your server-side form handler should echo back
the user input as a web page which is easily printable. Typically, you would
echo back a page that looks a like a well-formatted invoice form but with
the data received presented as normal page content, not form fields.

ObCSS: That way, the data can also be styled as desired, without all the
oddities that CSS implementations have with form fields.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

From: Jeff Thies on 1 May 2010 11:28
M.L. wrote:
> I created an HTML invoice form that works well except for the
> area where I enter the item description. I'd like a CSS solution that
> will allow my description column to autowrap and expand vertically as
> I type within the cell. I'd like the entirety of my text to be visible
> within that cell for printing.
>
> I expected this to be a Javascript issue,

It is.

<textarea id="my_textarea"></textarea>

<div id="my_textarea_display"></div>

If this is just for printing:

1) Read the value of my_textarea
2) Set the innerHTML of my_textarea_display to that value
3) Set the display of my_textarea to: none

Those are all easy things to do, Google if you don't know. Then ask.

It's not hard to make an expanding textarea, but it is hard to calculate
how much is enough, and not too little.

Jeff


but was told in that
> newsgroup that it could be done with CSS. So I'm hoping someone here
> can help. Thanks.
 |  Next  |  Last
Pages: 1 2 3 4
Prev: Active menu items in ul/li hierarchy (breadcrumb)
Next: Menu Bar not inside its containing div