tags:

views:

282

answers:

5
+1  A: 

Try using a relatively positioned div, it will contain a text area along with another div positioned absolutely.

<div id="outer" style="position: relative">
    <textarea id="txtArea" style="text-decoration: underline;"></textarea>
    <div style="position: absolute; left: 5px; top: 5px;">Comments:</div>
</div>

You'll have to style the textarea a bit to get the effect you desire.

Kirtan
So you layer "Comments" over the top, and then style the textarea so it doesn't use the overlapped space at all?
Joel Coehoorn
not sure how you would "style" the textarea though. I don't think indent works on editable data.
Zack
Hmm... this really could work, because there will be no border on the text area, it's a mono-space font, and it's not hard to use javascript to reserve the first 10 characters. The trick is not underlining that first portion.
Joel Coehoorn
Use a background color on the absolutely-positioned div, size to overlap the underline
Shog9
Or, as Chad said, and I pointed out to Joel before, use an WYSIWYG editor and write the code to hide the underline using the APIs provided by the editor.
Kirtan
A: 

I'm fairly certain that this is not possible with HTML and CSS alone (assuming you want someone to be able to enter text on both those lines). The only multi-line input is a textarea, and it must be a square.

You could probably do it with some javascript trickery, having a TinyMCE-style editor box, and use javascript to force the text "Comments:" to stay at the beginning, then have it automatically underline text as they enter it, to emulate the appearance.

Chad Birch
+2  A: 

You may want to have a separate stylesheet for printing, and when they go to print, lose the textarea and just have everything set up for the display of printing.

Some javascript will be needed to do this, which can run through changing elements on the new page for printing, but that wouldn't be a big deal.

Then you can have multiple divs with the format that you want, and the placement of everything.

Another option is to just have them click on a print button that will convert the page to a pdf. There are a several options depending on what you have on the server-side.

James Black
He said he needs to do "nearly everything client side" (don't worry, it was way after your post).
KyleFarris
A: 

Can't you just put a background image on the textbox that has what you need (the 'comments:' and the underlines) and then just do a:

text-indent:5em; /* or whatever works... */

on the element? There might be issues with people setting their print settings to not allow background-images. I'm not sure if that's an issue. Also, I'm not sure if text-indent works in IE--I'm currently on a mac and it works with FF and Safari.

EDIT: It does work in IE7 and IE8.

KyleFarris
A: 

There's no easy way, but you could try absolutely positioning the label to appear on top of the textfield and give the textfield a text-indent. Or giving it a default value via JavaScript.

The easiest ways would require JavaScript or maybe the CSS ":before" pseudo-selector, neither method would be cross-browser perfect.

Alan