Reputation: 29925

Line breaks in textarea element

This is PURE HTML. (no php or anything like that, if you want to know the background its a C# application with HTML in a web view).

All my HTML files are nicely formatted and correctly indented for maintainability and such.

Here is an excerpt:

<tr>
    <td class="label">Clinic Times:</td>
    <td><textarea name="familyPlanningClinicSessionsClinicTimes">Monday:
    Tuesday:
    Wednesday:
    Thursday:
    Friday:
    Saturday:
    Sunday:</textarea></td>
</tr>

The line breaks in the <textarea></textarea> element are there to get the line breaks on the page. However it also includes the indentation in the textarea element.

e.g.

example

The only way I can think to remove this issue is to remove the indentation. Its not the end of the world, but is there another way, to keep the nice formatting? Thanks.

Upvotes: 26

Answers (8)

joerg

Reputation: 1

This works for me in angular:

ts: log: string[] = [];

html: <textarea row=5 col=50>{{ log.join("
") }}</textarea>

result: in textarea each item of log is shown in a new line.

Upvotes: 0

BigSmoke3320

Reputation: 31

If you merely want a list of items, you can use <ul> <li>"Monday"</li> <li>"Tuesday"</li> ... </ul>
Using <ul><li></li></ul> will start a preformatted list with <ul> starting the list and <li> starting each item on the list. This method does not require any java or css and will auto indent.

Upvotes: 0

Marcx

Reputation: 6836

You could use the 
 (it means new line in html) but maybe that's not a nice formatting, like you said...

The only way I can think to remove this issue is to remove the indentation. Its not the end of the world, but is there another way, to keep the nice formatting?

<tr>
  <td class="label">Clinic Times:</td>
  <td><textarea name="familyPlanningClinicSessionsClinicTimes">Monday:&#10;Tuesday:&#10;Wednesday:&#10;Thursday:&#10;Friday:&#10;Saturday:&#10;Sunday:</textarea></td>
</tr>

Upvotes: 67

VinnyG

Reputation: 6911

In C# if you want to send a new line to a textarea you can use Environment.NewLine

Upvotes: 0

Dave Newton

Reputation: 160191

Nope; a textarea will spit back whatever it actually has.

You could inject the value from JavaScript, but that seems like a lot of work for an isolated thing.

Upvotes: 0

Shadow Wizard

Reputation: 66389

You can use <div> with contenteditable attribute:

<div contenteditable="true" style="width: 450px; height: 300px; white-space: pre-line;" name="familyPlanningClinicSessionsClinicTimes">Monday:
                            Tuesday:
                            Wednesday:
                            Thursday:
                            Friday:
                            Saturday:
                            Sunday:</div>

But in your case I think idea solution will be just using several ordinary text boxes, one for each day:

Monday: <input type="text" name="familyPlanningClinicSessionsClinicTimesMonday" /><br />
Tuesday: <input type="text" name="familyPlanningClinicSessionsClinicTimesTuesday" /><br />
...

Upvotes: 1