26

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.

István
  • 5,057
  • 10
  • 38
  • 67
Thomas Clayson
  • 29,657
  • 26
  • 147
  • 224

8 Answers8

66

You could use the &#10; (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>
Marcx
  • 6,806
  • 5
  • 46
  • 69
  • 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.. – Marcx Feb 07 '13 at 08:25
  • 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. – frattaro Aug 23 '14 at 00:56
7

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.

derekerdmann
  • 17,696
  • 11
  • 76
  • 110
  • Actually it's applied [in Chrome](http://jsfiddle.net/Lm3vP/1/).. but not in IE. (not even in IE9) – Shadow The GPT Wizard Nov 02 '11 at 14:32
  • @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! – derekerdmann Nov 02 '11 at 16:02
  • 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. – Thomas Clayson Nov 02 '11 at 17:29
1

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 />
...
Shadow The GPT Wizard
  • 66,030
  • 26
  • 140
  • 208
  • 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. :) – Thomas Clayson Nov 02 '11 at 14:35
  • And what about the `
    ` option?
     – Shadow The GPT Wizard Nov 02 '11 at 14:44
  • 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. :) – Thomas Clayson Nov 02 '11 at 15:15
0

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

VinnyG
  • 6,883
  • 7
  • 58
  • 76
  • 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. :) – Thomas Clayson Aug 20 '12 at 15:23
0

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.

Confederate 3320
  • 31
  • 9
0

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.

joerg
  • 1
  • 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. – Ed B Jan 18 '20 at 16:07
0

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.

Dave Newton
  • 158,873
  • 26
  • 254
  • 302
  • @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. – Dave Newton Nov 02 '11 at 14:36
  • 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. – Thomas Clayson Nov 02 '11 at 14:44
  • @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. – Dave Newton Nov 02 '11 at 14:46
  • 1
    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. – Thomas Clayson Nov 02 '11 at 14:58
-7

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

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

deejayy
  • 760
  • 3
  • 9
  • won't work in a textarea element unfortunately, nor does \r\n or CF LF or anything! :p – Thomas Clayson Nov 02 '11 at 14:27
  • 2
    Tags will be considered a literal string inside of a textarea. So his page will actually say `Monday:
    Tuesday:
    ...`. I don't think that's what he wants.     – Jon Newmuis Nov 02 '11 at 14:27