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.
Related
I am using text input field in my html page. When the input is more then the input field size, unable to view the remaining text. In Android phones i can able to view the entire text by scrolling using the property "Overflow: scroll", the same style/property is not working in iPAD and iPhone.
Note : Applying -webkit-overflow-scrolling: touch is also not working.
<input type="text" value="this is my input content that exceeds the limit in device" style="width:100px; overflow:scroll"/>
I've developed a static advert ticker that sits at the bottom of the window. This is in an <iframe> to make it easier for other people to place the unit on their sites. Another <span> around the <iframe> keeps it fixed to the bottom of the screen. The script has a help window which is within a tag - within the <iframe> and uses the visible / hidden property to show or hide text.
Now since the code is in an <iframe>, the help text would not appear on main window. To get around this, I made the <iframe> larger,and set it to transparent.
Visually, everything is fine. When the user clicks a button on the ticker, the help menu appears over the data in the background. However, I've just discovered that if there is a link on the main page that passes under the <span><iframe> section, it cannot be clicked. I've tried CSS pointer-events, but can't get that to work, (links within the <iframe> must also remain clickable)
Not sure which is causing the "fault", ie the <iframe> or the tag around it. Is it a security thing to stop "click jacking" (??) or more to the point, is there a work around.
If push came to shove, I COULD reduce the size of the <iframe> and use a javascript pop-up window to display help text, but those windows show the URL and status windows, and are not exactly elegant!
Here is the code before anyone asks:
This span covers the entire screen to the height of the underlying <iframe> I did this so the data could be centred
<span style="position:fixed;bottom:10px;display:inline;width:100%">
<center>
<iframe src="http://www.xxx.com/cgi-bin/ticker/run_tick.pl?s=xzy" frameborder=0 align=top width=800px height=330px marginwidth=0 marginheight=0 hspace=0 vspace=0 scrolling=no allowtransparency=true></iframe>
</center>
</span>
Set a height to the span the same as the iframe (330px)
Let me know how that goes
Oh boy, what FUN I've had getting this to work!! (Twelve hours on Wed 23rd, and about three hours today)
Originally, I had an <iframe> that filled virtually 3/4 of screen, (so that I could display the help window to uses in a '' rather than use a modal popup. But, for security reasons, the browsers will not let you click through text that covers links underneath.
I had to literally redesign the whole layout.
Now, I have the help file in a separate <span> window which has its visibility set to hidden till user needs it. But that still left the ticker code at the bottom.
I had to divide that into three <divs> one on either side of the main ticker. But again, the ones on the side are effectively masking the page underneath, so I had to set both <divs> so that they used "pointer-events:none" meaning the <div> was not clickable, and mouse events would pass through to the code underneath. The mid section for the ticker was set to the opposite, namily "pointer-events:auto" so that the TOP window got the clicks, but not the page underneath.
Next problem: Because the ticker shows graphics that extend into the main text, that left a 1/2" area where clicks on main page couldn't be accessed. Another span was added to the code which covered the area with a transparent gif. When the user places their mouse over this graphic, a swap takes place and displays a semi transparent checkerboard. They can then read what this means in the help file.
Finally, when user's click the minimize button, the <div> holding the ticker code is hidden (giving accesss to all the links on the page) and ANOTHER <div> displays "Restore" graphic. When they click that, it gets hidden whilst the main ticker window - and the two <divs> on either side are made visible again.
And it was only meant to be a simple script!! (Oh, and don't check the website or my blog 'cos I won't be uploading the changes till eve of Sat 26th)
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'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).
I'm have an .aspx page done with Vb.net and the buttons "Save Image" "print image" "Send image" is showing when I put the cursor on one of the images tag. I say one image because it doesn't appear on the other images tags. I don't want these buttons!
Are these the buttons?
ie6 image hover
(I don't know when they appear and when not - check your browser documentation or ask the browser vendor.)
Do you have the galleryimg tag set on the other images?
<img src="proprietary.gif" galleryimg="no" />
The 'no' setting will not show the toolbar, while if it is set to 'yes' the toolbar will be visible.
You can also disable this feature for the entire page by using the meta tag:
<meta http-equiv="imagetoolbar" content="no" />