Safari does not provide a scroll bar when TEXTAREA rows is less than 5

Question

Level 1

10 points

Safari does not provide a scroll bar when TEXTAREA rows is less than 5

In Safari, if a TEXTAREA has rows set to a value less than 5, then it will not display the scroll bars. As a consequence of this behavior, if the text overflows the TEXTAREA, the users in general cannot figure out how to view the rest of the text.

Example would be for 3 rows with five lines of text:

<TEXTAREA rows="3" columns="20">123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 </TEXTAREA>

The reason why this is happening, is it appears like if Safari cannot display the whole scroll bar including the two arrow buttons, then it displays nothing. I do like how FireFox deals with it, by displaying at least the slider if nothing else will fit, then the scroll bar, then the arrows.

Does anybody know how to force Safari to display the scroll bar when rows is less than 5? Please include an example that has been tested.

MacBook Pro Mac OS X (10.4.6) Safari v2.0.3

Posted on Jul 7, 2006 12:51 PM

Reply

Answer 1

Eme

Level 5

5,636 points

Jul 8, 2006 3:19 AM in response to scott_apple

Hello,scott_apple

"A picture is worth a thousand words". Could you take a screenshot and host it somewhere so we can see what you are speaking off ?
You can use the Grab application in Utilites folder.

Two hosting sites, Photobucket also ImageShack
I find Photobucket works better, imo. Then perhaps some one can help you. I personally can't visualize your problem, i am not sure what you are asking.The image would help. If I can not help likely some one
else can.

Eme:~[)

Reply

Answer 2

scott_apple Author

Level 1

10 points

Jul 10, 2006 8:12 AM in response to Eme

"A picture is worth a thousand words". Could you take
a screenshot and host it somewhere so we can see what
you are speaking off ?

I can do one better... Here is an URL that illustrates the problem with live examples. You can see how Safari displays the text area when rows is set to values of 1, 2, 3, 4, and 5. Only when rows has a value of 5 or greater does Safari actual insert the vertical scroll bar on the right hand side.
http://scott-tabar-safari.blogspot.com/2006/07/safari-textarea-no-scroll-bars.ht ml

In those examples, you can place the cursor in the TEXTAREAs and use the arrow keys to verify that each TEXTAREA actually did overflow.

The question is, does anybody know of any solution to get Safari to display a vertical scroll bar when rows have a value of 1, 2, 3, or 4?

Reply

Answer 3

Eme

Level 5

5,636 points

Jul 10, 2006 10:35 AM in response to scott_apple

Good lets pop you back up there in the topic list, in hopes someone will know
what you need to do, with this. i cerainly do not, now that i see it.

Eme

Reply

Answer 4

scott_apple Author

Level 1

10 points

Jul 11, 2006 7:59 AM in response to Eme

It does sound like a bug with Safari, doesn't it?

I would expect that it is not too common for someone to expect a large amount of data to be entered in such a small sized TEXTAREA; they would probably make it much larger so the bug will not manifest itself. Unfortunately, I am needing a TEXTAREA with a rows size of 3.

Reply

Answer 5

andyBall_uk

Level 7

20,516 points

Jul 11, 2006 12:35 PM in response to scott_apple

Hi

I don't have a solution for you, but notice that Camino on my mac renders your examples in a very similar way to safari, same goes for Opera and Omniweb.

iCab shows a tiny scrollbar every time, but it's a pain to use, imo. but then I actually prefer how safari treats your tiny textareas to the way Firefox does it.

iMac G5 rev B

Mac OS X (10.4.7) 2GB 250GB

Reply

Answer 6

scott_apple Author

Level 1

10 points

Jul 11, 2006 2:48 PM in response to andyBall_uk

andyBall_uk, thanks for checking that with some of the other Mac browsers out there. I really appreciate it!

How is that Safari actually looks better than FireFox? Are you using both of the most recent versions? Safari v2.0.3 and FireFox v1.0.5.4 or something close to them?

I would think that FireFox would be best since you can at least scroll to view all the text (without putting the cursor in one of them and then using the arrow keys to get around).

Reply

Answer 7

Eme

Level 5

5,636 points

Jul 11, 2006 4:55 PM in response to scott_apple

Hello scott_apple

I checked this again and it seems Safari 1.3.2 (v312.6) shows the scroll bar i have it on my show & tell page give it a second or two to load it is like molasses today.

Same on Tiger 2.0.4 it did have a scroll bar show on text area 5 rows

TEXTAREA - 5 Rows - 5 Rows of text NO Linefeed - No Scroll Bar:

It does have a scroll bar

TEXTAREA - 5 Rows - 6 Rows of text NO Linefeed - No Scroll Bar:

No feed i am not sure i do not know much about this, but a scroll bar it sure does have one

not sure this helps,

Shiira 1.2 did not show the scroll.

Reply

Answer 8

scott_apple Author

Level 1

10 points

Jul 14, 2006 9:05 AM in response to Eme

I see what you mean with Safari v1.3.2.

I am not fully convinced that it is able to better display the scroll bar with only 4 lines vs. the 5 as in Safari v2.0.3. I don't think we can truly say that Safari v1.3.2 is better with TEXTAREA elements than v2.0.3.

Why? The reason why is tied to myself in how I was stating this problem. Specifically when I stated that the issue is tied to when rows is less than 5. This may be true only when the font conditions are identical between my browser's configuration and everyone else's. So in short, it may be best to state it in terms of a fixed height instead of an arbitrary height that can differ based upon browser configuration and system configuration (ie.. if you press Apple - or Apple + a few times then the font size will be way off and my examples will all fail).

I think I falsely convinced myself that since rows are integer values and my examples were using the default settings for TEXTAREA and fonts in general, that everyone else would get the same results as what I was getting. I should have written a little JavaScript to pull out the actual pixel hight of the TEXTAREA and even manipulate the TEXTAREA's height with JavaScript to see where the actual threshold is on a pixel measure. The problem with this approach, is that the Blog I am using does not allow the use of scripting, so those examples would not be accurate anyway! 😟 May be able to do it through an inline style; i have not tried that.

Atlas... the weakness to not having full control over JavaScript or the standard HTML elements.

Anyway, I think so far the general consensus is that there is NO work around. I have been searching other websites, and I am surprised that I have not even found a reference to this issue. I suppose the following three statements must be true:
1. TEXTAREA is not a common tag to be used on non-commercial websites
2. There are not many commercial websites that are concerned with supporting the Mac
3. OR whenever TEXTAREA is used, the value of rows just happens to always be greater than that threshold value IF text happens to overflow.

Thanks! Scott

Reply