I'm making a web app. In it there are times when a form may be "read only". To simulate this with HTML, I have it so that all the (dynamically created) text boxes that contain content are disabled. This works fine enough, but if there is very much text and not all of it is visible at once(especially in multi-line boxes) then there isn't a way for the user to scroll around in it. Also, another issue is its not possible to copy and paste text from disabled text boxes.
So what I am needing is a way to make it so you can not modify the content in a textbox, but you can select the text, and the scroll bar works.
Also, I'm testing this in Firefox 3.5, though I believe IE has similar problems.(something compatible with both please)
Use JS:
<input type="text" readonly="readonly" onfocus="this.blur();" />
Also, perhaps make a scrollable div instead (overflow:auto; in CSS)?
What about simply using a <div> element with a static height/width and overflow: auto? You can add additional styles to make it look like a <textarea>, if desired.
EDIT: Made swallowed tag visible. Now it makes sense.
this.blur() will make it impossible to select, I think.
<input type="text" readonly>
should help.
Is HTML 4 and XHTML 1.0 compatible. Don't know about future compatibility though (i.e. HTML 5).
Related
In my webpage, I need a disabled textbox to show content (very long).
<input disabled type="text" value="a very long long long text...">
In Chrome, we can select the text in the disabled input to scroll to view all content.
However, In MS Edge, it seems that the disabled textbox is not selectable, therefore, it cannot be scrolled to view entire content.
Is there anyway to customize CSS to select text on disabled textbox on Ms Edge.
Actually content is selectable from disabled textbox in Edge but it will not scroll like it scrolls in Chrome.
<!DOCTYPE html>
<html>
<body>
<form action="">
Text : <input type="text" name="txt1" value="Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document. To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries." disabled><br>
<input type="submit" value="Submit"><br>
<textarea rows="4" cols="50">
</textarea>
</form>
</body>
</html>
Output in Edge browser:
So if your requirement is to select the text than it is possible as you can see in my testing result.
If your requirement is to scroll the content then at present it is not possible with MS Edge browser. As a work around, you can try to use read only instead of disabled as already suggested by #Turnip. It will allow user to scroll the text in textbox.
I will try to submit the feedback to Microsoft via our internal channel regarding this issue.
I am really interested in making a PHP page with user input boxes and various other elements to look like the control boxes you see on old school GUIs that had borders beginning and terminating with the box label.
See here:
How to do that with css?
Don't use a div. HTML has <fieldset> and <legend> which are designed for this usecase and render like that by default.
<fieldset>
<legend>Motor 1 Log</legend>
<label>Movements <input></label>
<label>Over-Currents <input></label>
<label>Amphous <input></label>
</fieldset>
I'd like to replace though CSS the type of an input from input type="text" to input type="date". Does it possible?
Thanks
No.
CSS is a presentation language. It cannot be used to alter the semantics and structure of a document.
The closest you could come would be to determine which if a file and date input were visible in the document.
You may only change appearance of elements (not real type) by css3 appearance property. For example some text element into element button:
span
{
-moz-appearance:button;
-webkit-appearance:button;
appearance:button;
}
But list of possible values is limited. Still not chance to change input type="text into input type="date".
(Late for you, but could be useful for somebody else)
I had to do the same for the mobile version of my website. I created 2 forms, one for big resolution screens and other for mobile. After the resolution becomes less than 600px width I hide the 1 form and display the 2nd (the second one is with changed types).
On a radio button checked event, I hide the div by
document.getElementById("AltYukleniciDiv").style.visibility = 'hidden';
But, when I use it for an aspxTextBox, it doesn't hide it. Or when I use the ClientInstanceName instead of document.getElementById(" ")
UnvanText.SetVisible(false); this didn't work either. UnvanText is ClientInsanceName.
javascript crashes there. I put an allert after that and it never shows it. I have to do it because I hide a div, including everything in it, but it still shows the textboxes that has validation. I don't know how it is possible. Can you tell me a way to hide them all? It used to hide the div with all of its contents before I make some validation settings.
It sounds like asp.net is being 'helpful' and changing the IDs of your elements.
Give the text box the attribute ClientIdMode="Static", and it might fix it.
you can add a CssClass attribute to that text box then use it to find the element and hide it.
You can consider using jQuery, so you need to write a single line of code:
$(".MyHideClass").hide();
or set attribute style display:none
I can advice using Firebug (FF Extension) for debugging javascript
I'm a new poster in stackoverflow. The community seems really nice so I'll go ahead and post my question.
I'm trying to style a asp.net MVC2 form so that instead of having all the fields on a strait line, I would like to have it like so:
Label: Text field
Label: Text field
I know you could do that with a table but I would like to use CSS to accomplish that. I know a little bit about css but not enough to figure out what to do. The only thing I came close to was to but my fields as a unorder list then styling the li item.
Thank you for your help!
Give the labels a class & add float:left to it.
There are plenty of CSS forms tutorials around if you get stuck.
There are likely dozens of ways to do it. If you're just trying to get a line break between your field / value pairs, wrap each line's worth of code in a <div> tag. Divs are block elements, meaning that by default there's a line break before and after them. Labels by default are inline, so you don't need to do anything special to get them to line up next to the text fields.
<div>
<label>Label:</label><input type=text />
</div>
<div>
<label>Label:</label><input type=text />
</div>