Textarea scrollbar doesn't disappear despite width:0

HTML & CSS
1

No scrollbar in Chrome, but in Firefox and IE, it doesn’t disappear although the element width is 0:
DEMO

What’s the reason? What’s a cross-browser solution so the textarea behaves like in Chrome?

2

I’m confused. You’re talking about the height scrollbar but using width?

3

When the textarea width is 0, the vertical scrollbar disappears in Chrome. But that doesn’t happen in Firefox and IE.

4

That may be but last I knew width = horizontal and height = vertical
My guess would be that Firefox and IE are getting it right but Chrome is getting it wrong.

This is more CSS than javascript so I’ll move the thread over there for now so those more versed in CSS than I can help.

5

Hi,

In Chrome the scrollbar is still there but you can’t see it or use it because it is squashed into zero width. In Firefox the scrollbar track disappears but the arrows don’t disappear. IE always displays the whole scrollbar.

I would think that Firefox and IE are more correct than chrome because although the width is zero the height is going to be very very long and so a scrollbar is needed. Overflow is needed to control content that overflows so even with zero width there should be a mechanism to display the overflow.

The easiest solution would be just to hide the overflow and then change it to auto when you give it a proper width.

e.g.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
textarea {
	height: 300px;
	width:0;
	margin: 0;
	border: 0;
	padding: 0;
	overflow:hidden;
}
</style>
</head>

<body>
<textarea cols="0" rows="0" id="textarea">Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world!</textarea>
<input type="text" value="0" id="input" oninput="resize();">
<script>
function resize() {
  var getSize = document.getElementById('input').value;
		var el = document.getElementById('textarea'); 
				if (getSize > 25){
					el.style.width = getSize + 'px';
					el.style.overflow = "auto";			
				}
}

</script>
</body>
</html>
6

Paul, although JavaScript is not your specialty, you always try your best to provide us with the best solution. I really appreciate it! God bless you! :angel:

7

But it seems that they follow Chrome when it comes to horizontal scrollbar: Demo.

8

Yes they do :slight_smile:

I think it’s just one of those things that the specs don’t clearly define and replaced elements like form controls are always awkward to style consistently.

Just try this simple demo in Firefox to see how ridiculous it is:


textarea {
	width: 300px;
	height:200px;
	overflow:auto;
	padding:50px 100px 50px 0;
}

In Firefox the padding right, top and bottom is outside the scrollbar!!

9

Good news! In Firefox 29 this bug is resolved. It also shows no scrollbar when the width is 0 – just like Chrome! :slight_smile:

10

That’s good news :slight_smile: