CODEWITHSUNDEEP
htmlcss
Joel Coehoorn
Joel Coehoorn

Reputation: 415790

How to have a mutli-line input or textarea that wraps?

I'm trying to achieve a layout in html that looks exactly like this when printed:

Comments: _____________________________________________
_______________________________________________________

...where the underlined portion is a single input tag of some kind — meaning it could also be a textarea or something else, as long as the user can input text and print it out.

The requirements:

The reason is that I have to visually re-create a paper document from an outside company to be an exact match when the page is printed from a browser. This is part of an internal "forms" system that pre-dates me with this company. It's set up so these forms automatically have margins and headers adjusted in the browser, so that's not an issue. Getting this html formatted the way I need is.

Upvotes: 2

Views: 830

Answers (5)

Alan Plum
Alan Plum

Reputation: 10892

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.

Upvotes: 0

KyleFarris
KyleFarris

Reputation: 17548

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.

Upvotes: 0

James Black
James Black

Reputation: 41858

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.

Upvotes: 2

Chad Birch
Chad Birch

Reputation: 74558

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.

Upvotes: 0

Kirtan
Kirtan

Reputation: 21695

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.

Upvotes: 1

Related Questions