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.
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:
Tuesday:
Wednesday:
Thursday:
Friday:
Saturday:
Sunday:</textarea></td>
</tr>
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.
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 />
...
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.
In C# if you want to send a new line to a textarea you can use Environment.NewLine
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.
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.
Try <br/> if it is good for you:
Monday:<br/>Tuesday:<br/>...
Related
My web application has started creating nodes for all the whitespace in my html file.
This code:
<td hidden>
<input type="text" hidden name="lines[{{$i}}][id]" id="lines[{{$i}}][id]"
value="{{$line->id}}">
</td>
is resulting in the td node having 3 children, two texts and the input.
Please see this image:
There I have console.log'd the element. I am not aware of how I have caused this to happen? I am using the PhpStorm IDE. I do not know what terms I would search in google to find an answer either.
edit: it seems to be the indenting. Is the web browser supposed to render indenting?
Thank you,
I have a table. One column contains pairs of dates, e.g.
2014/01/01 -
2014/01/02
I don't want this, because then the column is too wide:
2014/01/01 - 2014/01/02
I can't do this:
html
2014/01/01 - <br /> 2014/01/02
Because that causes this:
2014/01/01
-
2014/01/02
So the line needs to be broken exactly once. Any ideas?
That's where non breaking space comes handy. Try this:
2014/01/01 -<br>2014/01/02
In this case dash - should never end up on the next line.
Compare the behavior when it's not enough space in this demo.
<span style="white-space:nowrap;">2014/01/01 -</span> 2014/01/02
Or you could try the older <nobr>2014/01/01 -</nobr> 2014/01/02
I cannot reproduce this error, when I use this:
<table>
<tr>
<td>2014/01/01 -
<br />2014/01/02</td>
</tr>
</table>
I get the expexted output:
2014/01/01 -
2014/01/02
But you could use white-space:nowrap in your CSS:
td {
white-space: nowrap;
}
You can use the <pre> element to control formatting exactly (as in, whitespace including newlines will be rendered exactly as it is in the HTML source, between the open and close tags). It's kind of hacky but should work for this.
<pre>2014/01/01 -
2014/01/02</pre>
I want to keep the field and the icon (question mark) at the same line at any time, even if the width is reduced. (preferably using CSS)
I tried various options such as white-space: nowrap, putting them in the same <div/>, but no success.
EDIT
My HTML markup is similar to the following:
<ul data-role="listview" >
<li data-role="fieldcontain">
<div>
<label for="name">*Email</label>
<input type="text" name="name" id="name" />
<img src="help.png" title="title" alt="help"/>
</div>
</li>
</ul>
I am using HTML5 with jQuery Mobile.
white-space: nowrap has no effect on elements, it just tells the browser not to split plain text nodes.
To achieve what you want, you need to make the div wrapping everything wide enough to display everything in a single line. In the general case, this isn't simple to achieve without JavaScript because CSS has only rudimentary support for aligning several elements.
Solutions:
Make the div so wide that it will always be able to contain the three elements. This is hard because of the label and impossible if you want the input field to grow (= use all available space).
Give the div a right margin which is wide enough to contain the image and then position it absolutely in the empty space. Drawback: It will be hard to align the image vertically.
The solution that works perfectly but no one wants to hear: Use a table because table rows do what you want / need.
You could try several things actually. The most ugly version is the table. Its also the most easiest one.
it would look something like this.
<table>
<tr>
<td><label for="name">*Email</label></td>
<td><input type="text" name="name" id="name" /></td>
<td><img src="help.png" title="title" alt="help"/></td>
</tr>
</table>
Also you could try using the propperty inline-block in your css in the questionmark style propperties. It forces the questionmark to stay on the same line as previous element.
display: inline-block;
hope this helps you.
This isn't pretty, but what happens when you use a non-breaking space?
<input type="text" name="name" id="name"
/> <img src="help.png" title="title" alt="help"/>
Note that I moved the closing bracket to the next line to try to keep some sort of order to the code. Pretty ugly still though.
The benefit is that it is "semantic" in that you're instructing the browser that those two pieces of inline content belong together.
I have a form within a table which is within another form. My problem is that the embedded form tag is not appearing - the input and iframe appears, but the form tags do not appear. The table and outer form appear. What's wrong?
<form>
<table id=\"mytableid\">
<tr class=\"form_row\">
<td align=\"right\">
Upload Photo:
</td>
<td align=\"left\">
<form action=\"/myuploadpath\" method=\"post\" enctype=\"multipart/form-data\" target=\"upload_target\" id=\"photo_url_upload_form\" name=\"venue_photo_url_upload_form\">
<input type=\"file\" name=\"photo_url\" id=\"photo_url\" size=\"40\" />
<iframe id=\"upload_target\" name=\"upload_target\" src=\"#\" style=\"width:0;height:0;border:0px solid #fff;\"></iframe>
</form>
</td>
</tr>
</table>
</form>
Putting a form inside another form is not valid HTML. When this happens each browser will do different things with the markup. Some ignore parts, some break, etc. Either way you shouldn't do this.
Edit
If you are using tables for layout purposes, you technically shouldn't be. They are only meant for tabular data. You should use divs/spans and CSS to create the look you want on your site. A great place to learn about this stuff is W3C Schools.
I assume you're using something like Firebug or the Chrome DOM Inspector to look at your DOM tree and you can't see the inner <form>. These tools inspect the DOM itself, not the HTML source. That is, they show you what the browser has interpreted from your HTML. The problem in this case is that nesting a <form> within another <form> is invalid, and hence the browser has ignored it and continued parsing the rest of the document.
Obviously, the fix is to ditch that outer form since it's not doing anything. If you have it there for styling purposes, perhaps use a <div> with a class.
Here is a code snippet from my page:
<input value="Search" type="submit" /><!-- whitespace
--><span class="vdivider"></span><!-- whitespace
--></form><!-- whitespace
--><form action="login_action.php" method="post"><!-- whitespace
--><?php
Those whitespace comments are to get rid of the whitespace on each side of the divider. Is this really the only way of doing this? There has to be a more elegant solution.
One option to consider - use a templating engine if you can. For example, in Smarty, there's a {strip} function that does exactly this:
{* the following will be all run into one line upon output *}
{strip}
<table border='0'>
<tr>
<td>
<a href="{$url}">
<font color="red">This is a test</font>
</a>
</td>
</tr>
</table>
{/strip}
Output:
<table border='0'><tr><td><a href="http://. snipped...</a></td></tr></table>
You can use the font-size:0 hack. Basically, you set font-size:0 on the parent element, and set the font-size explicitly on the children.
Live demo: http://jsfiddle.net/simevidas/mLZYW/1/
(Presentation without hack: http://jsfiddle.net/simevidas/mLZYW/)
White-space only shows when it is around or next to inline elements, so at least for the forms you don´t need it (if you haven´t set your forms to display:inline...).
Positioning or floating things almost always removes the unwanted white-spaces, so for example if your .vdivider is supposed to be a vertical divider / new line, you can just use display:block on the input before it and remove that element and the comments around it.
Whitespace between elements (including newlines and tabs) cause browsers to insert spaces where there should be none.
The most elegant method that I've seen used to get around this issue is putting the > on the next line, instead of on the same line. This way, it's still legal html, and you can still keep it pretty.
For example:
<input value="Search" type="submit" />
<span class="vdivider"></span>
</form><form action="login_action.php" method="post">
<?php>
would become:
<input value="Search" type="submit"
/><span class="vdivider"></span
></form><form action="login_action.php" method="post"
><?php>