Line breaks in textarea element

Question

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.

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.

Supervise

Nope; a textarea will spit back whatever it actually has. I suppose you could inject the value from JavaScript, but that seems like a lot of work for an isolated thing. – Ilk

@Dave Newton — Should be an answer. – Playground

@Thomas Clayson — Please use real labels – Playground

Quentin - I don't want the default label functionality, all I wanted to do was to apply a set width to the label td's, so I added a descriptive class in order to do so via CSS. – Supervise

jsfiddle example. All text left jsfiddle.net/nfEwn – Nicker

@Nicker - jsfiddle.net/tclayson/nfEwn/1 – Supervise

Answer 1

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>

Explode

ie: 7/8 cannot display jsfiddle... on ie9/10: it works if you write it directly in the text area, won't work if update the textarea from js.. – Explode

I'd like to note that this is the only way I've been able to get line breaks into my textareas when adding them from (precompiled, minified, hogan.js) mustache templates. – Decarbonate

Answer 2

There isn't a pure HTML solution to your problem. Textareas always display any whitespace in their contents.

In a perfect world, you'd be able to take advantage of the CSS property white-space; unfortunately, it isn't applied to textareas either.

Doronicum

Actually it's applied in Chrome.. but not in IE. (not even in IE9) – Dasie

@Thomas Clayson - Oh, I assumed you wanted to keep your markup the same, since I wouldn't call sticking in newline characters "keeping the nice formatting." Whatever works, though! – Doronicum

Yeah, I know what you mean, but when I'm tabbed in multiple levels (in MY opinion) using newline characters looks better than untabbing the html. Especially as one of the annoyances is I'm using visual studio inside vmware with multiple panes of code up at once, so the actual window of code I've got is quite thin so having everything tabbed into the same level is much easier to read in this case. – Supervise

Answer 3

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 />
...

Dasie

Unfortunately this won't work. I'm specifically using a textarea. Also having separate days isn't good UI design either. They might want to change the text to "Mon-Fri 9.30am-4pm" or something similar. Thanks for your input though. :) – Supervise

And what about the <div> option? – Dasie

I'm using jquery to serialize and input data to and from C# code which works out of the box with a textarea. Plus as its literally a free-form textelement, textarea fits perfectly. I don't have any other arguments against it, but apart from the indenting thing I can't see any reason to go with that over a textarea. :) I will keep it in mind for the future anyway. :) – Supervise

Answer 4

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.

Ilk

@ThomasClayson I don't like that answer; IMO wedging CRLFs like that makes it much more difficult to read what's actually being displayed, which is the most important part. That said, I also think a textarea is a misleading element to use for this. – Ilk

Dave, honestly thanks for your input, but you don't know what I'm doing and why I need what I'm doing. I can't use contenteditable because I am serializing using jquery and inputting saved data back again similarly - also as its not WYSIWYG then there's no point. I also can't have separate fields for each day because this is only "guide" text. It will be injected into a word document in the end and they might want to change the format. Also, in fairness, the question was "how do I get line breaks without having to unindent my code" and Marcx has answered that perfectly. – Supervise

@ThomasClayson You seem rather defensive--take advice with the understanding that we can't read your mind, or see your monitor from where we're sitting. I'm not required to like an answer just because it suits your needs, and you're free to like whatever answer you want. We don't need to justify ourselves to each other--relax. – Ilk

I don't mean to come across as defensive, hence the "honestly thanks for your input", because I really am grateful for your input. Without guys like you, guys like me wouldn't get answers. The last thing I want is for you to NOT give me advice. However, I did comment on Shadow Wizard's answer with my reasons and necessities for why his ideas (and your further comment on his answer) wouldn't be appropriate for me, and all I'm doing here is the same. – Supervise

Answer 5

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

Donofrio

Thanks, but this is HTML really, the background is that its a c# app, but the problem is HTML within a web view so this doesn't help. :) – Supervise

Answer 6

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.

Fierce

Answer 7

This works for me in angular:

ts: log: string[] = [];

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

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

Guss

Make sure to give an answer that uses the technologies mentioned by the OP (i.e. not Angular or TypeScript). Edit your answer to make it framework and scripting language agnostic. And if you can, add a code snippet so that we can see the result of your solution. – Gurkha

Answer 8

Try <br/> if it is good for you:

Monday:<br/>Tuesday:<br/>...

Gwenny

won't work in a textarea element unfortunately, nor does \r\n or CF LF or anything! :p – Supervise

Tags will be considered a literal string inside of a textarea. So his page will actually say Monday:<br/>Tuesday:<br/>.... I don't think that's what he wants. – False