Google Chrome textareas wrapping and adding line breaks - google-chrome

I've got a problem with textarea's in Google Chrome. I'm using classic ASP, but this is unimportant as Chrome is actually posting the data incorrectly.
The problem is with a text area. As soon as a string of text is too long to fit one line of the text area, it wraps to the next line (as it should).
My problem is that when submitted, the form data contains a CarriageReturn & LineFeed at every spot where the text wrapped, as well as user generated enter/return events - I can't even tell the difference between the two.
Does anyone know how to fix this? Possibly an option in the text area or something? All other browsers only add CarriageReturns and LineFeeds where the end user has actually put them in.

This should only happen if you set the wrap="hard" attribute on the textarea.
Do you have wrap="hard" set on the textarea ? If so, remove it. If not, can you try setting wrap="soft" as attribute?

Related

How to break lines in Input field via Development tools

I need to perform a full PDF print of a website with a populated questionnaire. It's accessed via Chrome, but some fields contain extensive answers and they are partially cut as they do not fit within the line. The text can be extracted via copying, but it's not fully visible in a print (I'm sorry, I cannot provide a full picture).
To make the full contents visible in the print, I would like to break it into several lines. I heard that it could be done by adding the "word-wrap: break-word" or "overflow-wrap: break-word" properties, bit it appears that it's an Input field and, from what I heard, such fields are not breakable and I would need to change it to Textarea.
However, when I change the field type to Textarea, the contents of the field disappear.
Is there any relatively simple way to somehow make this field breakable and show full text which was previously provided as an input?
textarea does not have a title attribute. That's why the text disapears. Try to insert the text like this: <textarea>Text should be here</textarea>.

Issue with content generation in outlook email reply

I am facing an issue with email generated from our application.
In the received email, I do the following
Ctrl-R (reply)
Ctrl-A (select-all)
delete
And I expect to then see an empty outlook email with the correct To: and Subject: lines. The problem is that these actions now lead to an empty box in my email rather than an empty email.
When I debugged the issue, found out that this is because of the following
Border is given to a div which is hidden.
In reply mode, this div becomes visible.
When I do select all and then delete, the box (which is due to
border to div), doesn't go
Figured that when I change div to span, this problem won't occur. But it is leading to lot of other problems.
Can somebody suggest a solution here. Basically, what I want to achieve is:
Delete all the hidden elements that are not disappearing when I select all and delete
Not exactly sure what you are trying to achieve.
Do you want to delete all the hidden elements that are not disappearing when you select all and delete?
You could try clicking the "Format text" tab, then change from "As HTML" to "As Plain Text" before you choose "Select All".
The problem was caused by a div at the end. Fixed the issue by adding a line break after that div

FLEX: HTMLText paragraph tag adding extra line break

Alright, So I have an issue that is a bit weird. I am using a RichTextEditor and have allowed the user to re-size it. All the controls have been stripped away to a main toolbar such that the RichTextEditor just looks like a box with text in it. I have an issue where when I save the htmltext generated by the editor and then re-render it later it always adds an extra line break at the end of the text. I've found that this is due to the paragraph tag, and since I want the user to be able to align text I have to keep it. Does anyone know how to strip this last line break without stripping all the formatting?
I hacked a fix for this, basically involves stripping the last closing paragraph tag </P>. RichTextEditor is ugly :(
This is absolutely a bug, and it is triggered by setting the "htmlText" property instead of the "text" property. This occurs whether you assign it in code, or cause the designer to set "htmlText" instead of "text" by checking the "render as html" button in the properties for the text field. Also of note, this only occurs on "input" type TextFields. And if you start with a "dynamic" type textfield and subsequently set "type" to "input" (also have to set "selectable" to true or cursor will be invisible (another bug)), you will see the extra line appear right in front of your eyes. Again, this does not effect dynamic text fields, just those in input mode.
Despite the fact that the htmlText property is identical in both cases whether you assign a string like "Hello" to text or htmlText (the htmlText value generated is identical for either), the extra line only appears when setting the htmlText property.
Specifically, it occurs when you set htmlText to a string that actually contains html paragraph tags. If you just assign htmlText some text like "Hello", the problem will not occur. On the other hand, if you assigned htmlText <p>Hello</p> or you assigned htmlText to itself (which you need to do to preserve the html and force the internal metrics to update immediately), then the problem occurs. Someone mentioned, if you omit the closing </p> tag, the problem won't occur, and that's true. It's also true that assigning something like <a>Hello</a> won't trigger the problem.
So in summary, this problem occurs only when one sets the htmlText property of an auto-sized, multiline, input type text field to a value that contains <p></p> tags. It does not occur with dynamic text fields, nor does it occur on input text fields that are not autosized, nor does it occur on those who are autosized but not assigned <p> tags to htmlText.
To reproduce this problem, set up a text field in the designer and make sure the background and outline is turned on so you can see the size of the field, then it will be a single line high (multiline text field) as expected (assuming it's wide enough). If you then go to the code and set txtfld.htmlText = txtfld.htmlText (set it to itself), this mere assignment of htmlText property (to it's own same value) causes an additional line to be added. And the value of htmlText is in fact the same, it hasn't actually snuck in an extra <p> tag or anything... it just displays this trailing return that shouldn't be there. As expected, the same thing occurs when you check "render as html" in Flash properties for the text field, which seems to cause it to set htmlText instead of text, and causes the problem to appear.
It's unlikely that there are actually two rendering modes, since it technically always renders htmlText (i.e. htmlText always has a value, and you could always set the text format of some segment of the text with setTextFormat, which was originally assigned with "text", and that doesn't trigger some kind of switch to "html rendering mode" or anything like that.
The behavior seems to strictly come as a result of assigning htmlText property.
The only way to avoid it (aside from setting htmlText, reading back the value, stripping the last </p> tag off, and reassigning it), is to just initialize all your text fields as plain "text", and then manually apply the formatting through calls to setTextFormat( TextFormat, beginIndex, endIndex).
The true catastophe of this bug, as mentioned in the original problem post, is that you cannot save and restore the htmlText value of a TextField, because setting htmlText to a string containing html (specifically the p tag), causes this extra line to be added, compounded by the fact that if you specifically want the textfield to be sized right, you'll probably have autosize turned on, and that's specifically when this problem creeps up and ensures the size is NOT right.
I had a similar headache with flex html text components. Flex does not have proper support for many html cases. You'll see extra padding for <p> and <li> all the time. Heck, there isn't even support for the <ul> tag. If there is a line break in a normal text, flex appends extra padding at the end of the tags and removing this line break will remove the extra padding.
However, you might want to use something like this: http://code.google.com/p/flex-htmlfilter/

Textbox cursor landing in the middle instead of beginning of line

I am making a page where I try to allow people to write about parks they know about. A problem I am having is that when a person tries to edit a park, the cursor in the text area ends up what seems to be 1 tab over from the beginning.
Here is an example:
http://www.comehike.com/outdoors/parks/park.php?park_id=447
On the left column, if click on "Write and share what you know about this topic" you will see that the cursor doesn't end up in the beginning of the text area.
Any idea why this is happening and how to fix it?
Thanks!!
get rid of the space between the textarea tags and that will solve that problem:
<textarea> </textarea>
<textarea></textarea>
There's obviously data (looks like 2 tabs) being output in the value of the textbox, or is stored in the database with the existing data.
Ah yes, it's between your textarea tags. Remove the tabs.

how to make the file input field wrap?

In a HTML form I have a file field like this:
<div class="filefield">
<input type="file" name="myfile" id="fileinput">
</div>
It displays a button and some text besides the button. When no file has been selected yet, the text is: No file chosen. If there is a file already selected, it displays the name of the file.
This text displays on the right side of the button. I want it to display below the button. I have tried numerous things in CSS, and nothing works, the No file chosen just always displays on the right side of the button, even if both the div and the input are given fixed widths only as wide as the button, and a fixed height high enough for a button and two lines of text, the text still displays on the right, outside of the div, and not below where the is space inside the div. How to make it wrap so the text displays below the button?
With #Guffa's answer showing that you can't mess with that field, you could create a hack around it.
What about a button element, that on click acts like a file browser button? And then a span element that holds the value of that file browser input? It would be some js hackery for sure, but could solve the problem.
EDIT
Working example: http://jsfiddle.net/nmeAW/1/
Edit 2
Even more better working example: http://jsfiddle.net/nmeAW/2/
You can't. The file input field is a single control, even if it looks like several controls that could be controlled separately.
Besides, how the file input control is displayed depends entirely on what browser you are using. It's appearence is not specified in the standards, so any browser vendor can choose to display it any way they see fit.
You might look into jQuery and some of the upload file plugins that can help you "restyle" the input essentially by hiding it and activating/displaying file selected information in html.
http://www.tutorialchip.com/jquery/9-powerful-jquery-file-upload-plugins/
http://www.uploadify.com/demo/
http://www.plupload.com/example_queuewidget.php
http://blogs.bigfish.tv/adam/2009/06/14/swfupload-jquery-plugin/