Is there a script or binding that I can use to make a text box read only? - widget

I need to use a text box to display the information but it needs to be read only so that the user can't edit the information in the box.
I have looked at other questions similar to this and tried their way but nothing has worked out.

In addition to the solution from #Markus Malessa in the comment above, you can also just use a label instead of a text box to accomplish the same thing. I have a custom label style set up that I can use to make the text in the label look like the text in any surrounding text boxes. Using the label instead means that the user doesn't get the disabled pointer when they mouse over it.

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

Auto resize the width of input text area on hidden DIV

I use a Hide/Show .js script that hides some checkboxes and on the right side there is the search field when I click to hide it I want to expand.
Ex.
Before hidding:
Before hidding Image
After hidding I want the search field to be expanded 100%
After hidding Image
I searched for 2 days something and can't find a way to make it expand I use the bTemplate engine to store the HTML code.
Did you try changing the CSS properties through the "setAttribute" method of the elements in question through Javascript? Basically, the code you used to "hide some of the checkboxes" in the first place is pretty much like how you'd write the code to do the other things you're looking to do.
In other words, When you want the checkboxes out of view and the text entry box centered, as in your second reference pic, you could have the Javascript code written through the "setAttribute" method so that when a particular event happens, the css "display" parameter for the check boxes could be set to "hidden", the size of the text entry box can be increased, and the css "position" parameter for the text entry box can be set to have it centered, etc.
That is, of course if I understand your issue correctly. Can you provide the code you are using? I'm sure me or someone else could clarify things more if we could see what you have written.
Hope that helps at least a little! :)

Binding Text Label to an Input Field so that when Google Maps moves them they move together

Can someone please help with a the binding of a text label to an input text box. The purpose is to implement a search box as per this question.
The problem is, is that when you move a Google Control, say to place it at the top of the map, Google appears to take control of the input box and leaves everything else behind. I have tried every possible technique and even this one which I thought might work; but it doesn't.
Basically what I want is for this to bind:
<div>Search Box: <input id="pac-input" class = "search-input"></input></div>
EDIT: Just thinking about it I could just create a label an position it near the <input box> but that could be a little messy and possibly hit and miss.
You need to include the label in the HTML that you place in the control. Bind the autocomplete to the input element.

Put a information box below the input field

I want to display extra information when the user typing text in the input field. How can I position the information box directly below the input field? That is something similar to the dynamic result below the input box when searching using google.
Also, is it possible to detect and expand the size of the information box when the text is too long? Thanks.
Are you looking for an autocomplete type of functionality?
http://docs.jquery.com/Plugins/autocomplete

Hide arrow in standard dropdown?

Is there a a way to hide the arrow in a standard dropdown select fieldset?
Fiddle link
I have an autocomplete system where you fill in the organisation number of a company and it finds the info based on a database. I'd like to have the select box, but without the arrow..
I need it to do this as it's a double function form, either you can fill in your ORG nr or just manually type it in, pretty simple, probably used all over the internet.
Thanks :)
Kyle,
Usually autocomplete systems use input text elements instead of a select element. This creates what you are trying to achieve. Google is a classic example of this.
If you want, you can take a look at jQuery's autocomplete plugin to get another example and some code ideas, or whatever. http://docs.jquery.com/Plugins/Autocomplete
It's not easy, but you can fake it by putting a button above a Select that has its size property set to a value greater than 0.
Have the Select hidden and positioned absolutely under the button. Clicking the button shows the list. Selecting the list changes the text on the button and re-hides the Select.
This way you need a text box, because you cannot type anything in <select> tag.
And put an onclick event to this box to open autocomplete with all possible values.