CODEWITHSUNDEEP
htmlfirefoxtextarea
Martha
Martha

Reputation: 3854

One-row textarea in Firefox refuses to show vertical scrollbar

I've already figured out that Firefox's sizing of textareas is buggy - it always adds one to your rows and cols settings. But I've decided to just ignore that. The problem is that Firefox also refuses to put in the vertical scrollbar, even if I type a friggin' short story into the box.

Am I doing something wrong (i.e. invalid)? Is there a workaround?

<textarea rows="1" cols="35" name="Cmnt1"></textarea>

(I want to use a one-row textarea instead of an input type=text precisely because the latter doesn't provide scrollbars. All the other browsers will give you a vertical scrollbar even on a one-row textarea.)

Note that this field will almost always contain just a single line of text, but it needs to accept more "just in case". A text input field is less than satisfactory (<-- understatement) because it always hides the overflow. In every other browser, a single-row textarea works exactly as I want. I vehemently disagree that what I want is a usability problem. Unfortunately, the way it behaves in Firefox is a usability problem.

Edit: turns out there's a bug with my installation of Firefox. :/

Upvotes: 2

Views: 14070

Answers (6)

teynon
teynon

Reputation: 8288

I know this is really old, but I have a similar issue and found the answer to your question in the process. Playing with a jsfiddle ( http://jsfiddle.net/z8btg/1/ ) in firefox revealed that the vertical scrollbar is only visible if there is room to display both the up and down arrow graphics. (Click on the little resize icon and make it small / big.) For me, the sweet spot is 34 pixels.

What I am trying to do: I need the textarea to be one line until the textarea is focused, then I change it to a larger (popout style) textarea.

Upvotes: 3

ES Lorence
ES Lorence

Reputation: 11

I used something like this to present a html link to visitors, needed to fit into the design and usability is just fine for it's intended function:

<input type="text" name="linkHTML" id="linkHTML" style="width: 95%;" value='YOUR TEXT CONTENT' onfocus="this.select()" onclick="this.select()" />

Set width as needed (% or px).

On click will highlight for copy.

Upvotes: 1

Emily
Emily

Reputation: 10088

I am using Firefox 2.0. The scrollbar on the textarea does not show up until the height of the textarea is 32px (which is about two lines of text). If the height is less than that the scrollbars disappear -- probably because there is not enough room to show the arrow icons.

Upvotes: 0

DLH
DLH

Reputation: 2821

Try setting the overflow css property to "scroll". For example:

<textarea rows="1" cols="35" name="Cmnt1" style="overflow: scroll;"></textarea>

Edit: Sorry, should be overflow-y: scroll.

Upvotes: 2

edeverett
edeverett

Reputation: 8218

Try setting the height of the textarea to 1em with CSS (which means one line-height unit) and set the rows to a higher value.

Upvotes: 0

Tyler Rash
Tyler Rash

Reputation: 1173

Focus on the textarea, hit the return key.

This sounds like a pretty terrible idea, by the way.

Upvotes: 1

Related Questions