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"/>
Related
enter image description hereI have created a multidropdown component. In the input field text is covering the icons as shown below.
I want the text to flow down the icons.
Based on the picture you have uploaded , If you want the input field text not to overflow over the icons you must specify a width for the input :
<input style={{ width : "80%"
// or 200px
}} />
Or If you want the text to go to next line you must use textarea instead of input :
<textarea />
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 trying to get my ChromeVox screen reader to read the bubble message that pops up when the user tabs over to the tooltip icon, but it doesn't and the documentation out there is not very clear on what I thought should have been a simple solution.
this is the code in the file I am trying to refactor to get the screen reader to read the tooltip:
<div class="sub-item content-spaced">
<span class="text" tabindex="0">{{translations.taxEstLabel}}</span>
{{#hasEstimatedTax}}
<span class="value" tabindex="0">{{totalEstimatedTax}}</span>
{{/hasEstimatedTax}}
{{^hasEstimatedTax}}
<div class="tooltip" role="tooltip" tabindex="0" data-info-text="{{translations.taxEstMessage}}"></div>
{{/hasEstimatedTax}}
</div>
This is a Handlebarjs template by the way.
I'm not familiar with Handlebarjs but your <div> that's a tooltip doesn't appear to have any text between the <div> and </div>. Is the text injected in between when the div receives focus? If text is inserted, I'm guessing when the div receives focus, the screen reader will announce what's in currently in the div (which is nothing), and then your js code runs that injects the text.
If this is how it works, then you can add aria-live="polite" to the div. That will allow the screen reader to read any text changes in the div.
<div aria-live="polite" class="tooltip" role="tooltip" tabindex="0" data-info-text="{{translations.taxEstMessage}}"></div>
As a side question, why do your <span> and <div> elements have tabindex="0"? I know tabindex will allow the keyboard focus to move to the element, but generally you shouldn't set tabindex on a non-interactive element. If you added tabindex for the sole purpose of allowing a screen reader to tab to the text so that they can hear it being read, that's not necessary. Screen reader users can navigate to every element in the DOM using various screen reader shortcut keys, such as 'H' to go to the next heading, 'T' to go to the next table, 'L' to go to the next list, etc. If your html is using semantic elements such as <h2>, <table>, and <ul>, then your code will work great with a screen reader.
I am using a jquery mobile slider button
<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" step="5" />
The slider automatically generates a text input and in Chrome it also puts a spin button inside of the text input. Anyone know how to change the color of this spin button?
Well you can't change the color of the scroll bars/spin button unless they are HTML elements. IE is an exception and allows this, but then again it is not a web standard and not supported anywhere else. As a workaround, you could hide the browser created spin-button and replace it your own custom spin button consisting of DIV tags with appropriate event handlers.
you can use different themes or use the theme roller
copied from here:
If you just want to get rid of the up/down arrows, you can wrap the input in an element with a specified width/height and overflow : hidden:
$(".ui-slider-input").wrap($('<div />').css({
position : 'relative',
display : 'inline-block',
height : '36px',
width : '45px',
overflow : 'hidden'
}));
I need to create user control with Texbox Textmode="Multiline" or html textarea.
When in edit mode Textbox/textarea has to be resizable. I can use some jquery plugin for this. But in read only mode this Textbox/textarea is disabled and it must be automatically resized (height) to fit the text. Even if text takes pages. I could just hide Textbox/textarea in read only mode and display text in div but I would like to keep edit and readonly page look same.
Any ideas?
Why have textarea/input in readonly mode - versus using js to switch back and forth between that control and a DIV or a P tag (to display the text), where simply by not setting the height (or setting it to height:auto) that box would automatically size to contain all text?
Also, unless your surrounding content doesn't allow that, enable resizing the textarea to the user; see http://davidwalsh.name/textarea-resize