Horizontal scroll bar appears when content is larger than the box itself.
Since the latest Firefox update, when working in a form, if the text entered into a text box is longer than the size of the box, then a scroll bar appears which hides the text behind it. In the old version, you could simply select the text and drag right to see the rest of the text.
Additional System Details
- Shockwave Flash 11.5 r502
- Adobe PDF Plug-In For Firefox and Netscape 10.1.5
- Google Update
- NPRuntime Script Plug-in Library for Java(TM) Deploy
- Next Generation Java Plug-in 1.6.0 for Mozilla browsers
- Microsoft Lync 2010 Meeting Join Plug-in
- IBM GLOBAL PRINT PLUGIN VER 4.1
- Citrix ICA Client Plugin (Win32)
- Office Plugin for Netscape Navigator
- User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:18.0) Gecko/20100101 Firefox/18.0
I haven't noticed this in <input type="text">. Does it only happen on particular sites?
You can check what kind of form control it is by right-clicking > Inspect element. Use the button with the 3 offset horizontal bars to see the HTML tag in context. You can right-click to copy it. (If you click the Style button at the lower right, you also can view the style rules for the field.)
That sounds more like a text area of one row or an edible DIV element with overflow enabled.
Thanks for the prompt reply.
I have only noticed it with one site. I use the site for work. Some of my colleagues have the same problem but others don't, although I can't confirm what version they use.
When I performed the steps you mentioned, I received the following:
<textarea class="text sr " wrap="off" id="arid303558600" cols="20" maxlen="200" style="top:0; left:130; width:182; height:21;" rows="1"></textarea>
Is this a problem with the web site, or can a setting be changed in Firefox? Obviously something has changed with Firefox as I never had this problem until the update.
I have included a picture of the error below. On the left is how Firefox display the text box and on the right how IE displays the box.
Thanks for all your help with this.
Modified by CammyT
Looks that it is caused by the wrap="off" attribute.
Changing this of hard or soft make the scroll bar disappear.
Note that you should be able to resize the text area to get more rows.