Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Scroll without a scrollbar

    Sample form:

    Code:
    <!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:

    Code:
    #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:

    Code:
    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?

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    925
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Try explicitly declaring the rows and cols for the textarea.

    Like:
    Code:
    <textarea id="entry_3" rows="5" cols="30"></textarea>
    When I added it to your code on that page and pressed Run, typed some text in, it didn't show a scrollbar anymore.

    Kind regards,

    Lc.

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by LearningCoder View Post
    Try explicitly declaring the rows and cols for the textarea.

    Like:
    Code:
    <textarea id="entry_3" rows="5" cols="30"></textarea>
    When I added it to your code on that page and pressed Run, typed some text in, it didn't show a scrollbar anymore.

    Kind regards,

    Lc.
    It makes no changes. Thanks anyway!

  • #4
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    925
    Thanks
    76
    Thanked 29 Times in 29 Posts
    That's strange because I tried it on your site example and I also tried it locally on my own machine just to be sure. It worked both times.

    Kind regards,

    Lc.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •