How to break lines in Input field via Development tools - html

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

Related

full-width ("paragraph") underline in QTreeView with HTMLDelegate

I have added a HTMLDelegate to a QTreeView instance I'm tinkering with (see How to make item view render rich (html) text in Qt), so I can present its contents with rather simple rich text (HTML). The hits are presented as
<headerstyle>result type</headerstyle><br>
%d results of this type
where "headerstyle" is either a single tag (say ) or a combination of such tags.
That I'd like is to add underlining to the 1st line that spans the entire width of the QTreeView. Checking existing suggestions on here make it seem doubtful that this will be possible, but maybe I'm overlooking something?
I tried adding <span style="border-bottom: 1px solid"> but no borders are ever drawn. That may be a limitation in the HTMLDelegate, but it probably wouldn't work anyway. does work but only applies to the actual text, not the entire first line. I guess what I'd need is a right-aligning tab character...?
Current actual code: https://github.com/RJVB/audacious-plugins/blob/RJVB-MP-Qt/src/search-tool-qt/search-tool-qt.cc#L166

show the large text to edit like the textarea

Featured on the cover of Business World as one of the ‘Ten Young Guns’ of the Indian marketing communications community (May, 2010)MBA from IIM, Calcutta .. We need a username and password protected client-login area, where they
can view and download files. Pls let me know your recommended placement
for this and the admin controls (add, upload, delete files).
I have this text which is coming from database , When the user click on the update , it will go to the next page show all the values in INPUT TYPE ="TEXT" field . now my problem is when the text is small , its good and easily visible but when the text is larger like the above example , its not visible like the textarea
So the user can see and edit large text but the textarea has not a feature to show the text and my whole editable text in the form
So any body can help me in this
You can make an <input> text field larger by using the size attribute, or specifying a width in CSS, but it will be confined to a single line, so you need to use a <textarea> to edit multiline content.
You can make the textarea larger using the rows and cols attributes: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
You may need some server side logic based on the length of the text to output the correct form element.

contenteditable div in UiWebView - new lines are not saved when clicking on done

I have the following div in UIWebView:
<div contenteditable="true"></div>
If the user inserts new line (using the return key in the visual keyboard), and when he is done he clicks on done in the previous/next/done grey visual keyboard, it combines the lines to one line.
How can I avoid it?
Perhaps this JSFiddle can shed some light onto what's happening within your application. If you type some lines in the top DIV (gray background color), the HTML code that you get as the return value of its innerHTML property will first display in a textarea field below it (including HTML tags formatting). As you will soon see it's not merely what you'd expect to handle in your application ('line one' + CRLF + 'line two'...), but it also contains HTML elements separating lines one from another. That's how browsers are able to display contenteditable DIVs as if they're 'memo' type controls - by parsing their HTML (that's what browsers do). This HTML formatted text is also how your application receives user submitted text, and there you have to decide what to do with this formatting. You can either strip them away (which is, I suspect, how you set that object's property and it deals with that for you) replacing HTML elements like <DIV></DIV> and so on with a space character, or choose (with your control's property, or in code) to handle this formatting whichever way you'd like them to be handled. I'm not familiar with UIWebView though, and you'll have to find on your own how to retrieve complete HTML formatted values that you want to apply to the next DIV element that you're displaying (or same one that you're assigning new values to).
UPDATE: After searching the web for UIWebView reference, I've actually stumbled across one related thread on SO that shows how to retrieve innerHTML value of an element in your underlying HTML document:
//where 'wView' is your UIWebView
NSString *webText = [wView stringByEvaluatingJavaScriptFromString:#"document.getElementById('inputDIV').innerHTML"];
This way you'd be able to retrieve the whole innerHTML string contained within the contenteditable DIV that you use in a webText string variable and parse its HTML formatted text to whatever suits your needs better. Note though, that different browsers format contenteditable DIVs differently when Enter Key is pressed and some will return the next line enclosed in a new DIV, while others might enclose it in paragraph P and/or end the line with a break <BR> or <BR />, when shift+enter were used together to move to the next line. You will have to account for all these possibilities when processing your input string. Refer to the JSFiddle script I wrote using your UIWebView component to check what formatting applies.
Of course, in your case, it might be simpler to replace your contenteditable DIV with a textarea that will return more commonly formatted \n end-of-line (CR+LF). DIVs however are easier to design, so choose whichever suits your needs better.
Cheers!
I don't believe there's a solution to this from the objective-c side of the stack. The standard HTML- element only delivers a single string. It might be possible to achieve through some javascript magic or similar on the web-end of things.
My HTML-skills are not up to scratch but if you also control that end perhaps changing the to a textArea might help?

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/

Google Chrome textareas wrapping and adding line breaks

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?