Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
Sample form:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {font:13px arial; color:white;}
body {background:black;}
label {display:inline-block; width:50px;}
input, textarea {margin:0; border:1px solid red; padding:0; background:green;}
textarea {width:300px; height:100px;}
</style>
</head>
<body>
<form action="#">
<div><label for="entry_0">Name</label><input type="text" id="entry_0"></div>
<div><label for="entry_1">Email</label><input type="text" id="entry_1"></div>
<div><label for="entry_2">URL</label><input type="text" id="entry_2"></div>
<div id="parent"><textarea id="entry_3"></textarea></div>
<div><input type="submit" value="Submit"></div>
</form>
</body>
</html>
I'd like to remove/hide the textarea scrollbar as it doesn't match my form style. I know I can use jQuery plugins to style the scrollbar, but they don't work reliably across different browsers/systems.
To hide the scrollbar I can use textarea {width:300px; height:100px; overflow:hidden;}, but it completely stops Firefox scrolling through mouse and keyboard.
I also tried the following workaround:
#parent {width:284px; height:102px; overflow:hidden;}
textarea {width:300px; height:100px; overflow-x:hidden; overflow-y:scroll;}
It should work accurately if I add some script to calculate the parent division width:
var textareaWidth = document.getElementById('entry_3').scrollWidth;
document.getElementById('parent').style.width = textareaWidth + 'px';
But anyhow the above approach doesn't seem to work in Chrome/Safari:
Demo: http://jsfiddle.net/RainLover/snTaP/
 
Open the above demo in Chrome/Safari >> insert some text into the textarea >> highlight/select a line and drag your mouse to the right and you'll see the scrollbar. Or use the keyboard keys Page Up and Page Down.
 
Any corrections or other solutions?
Posted 6-Dec-12 11:06am

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

These same codes of you
 
* {font:13px arial; color:white;}
body {background:black;}
label {display:inline-block; width:50px;}
input, textarea {margin:0px; border:1px solid red; padding:0px; background:green;}
#parent {width:284px; overflow:hidden;}
textarea {width:300px; height:100px; overflow-x:hidden; overflow-y:scroll;}
 
Works fine in my chrome. Check with the updated version of chrome
  Permalink  
v2
Comments
RainLover at 10-Dec-12 8:18am
   
I use the latest version of Google Chrome on Windows XP.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 299
1 Maciej Los 295
2 Sergey Alexandrovich Kryukov 230
3 Aajmot Sk 191
4 Sinisa Hajnal 166
0 OriginalGriff 7,760
1 Sergey Alexandrovich Kryukov 7,072
2 DamithSL 5,604
3 Manas Bhardwaj 4,986
4 Maciej Los 4,785


Advertise | Privacy | Mobile
Web02 | 2.8.1411023.1 | Last Updated 10 Dec 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100