Grow your CSS skills. Land your dream job.

Textarea + overflow:hidden + (Firefox or Opera) = wonkey!

  • # February 27, 2009 at 4:06 pm

    Hey all, I’ve come across an oddness that I’m hoping someone has seen before and knows how to fix.

    Basically, I have a sort of ‘viewpane’ div that has a set height and overflow:hidden; and then a very tall bit of content inside it – this comes from this project: http://daily-grind.com

    The problem is, when you have this sort of a setup and you put a <textarea> inside the ‘viewpane’ element in a place where it would cause the browser to scroll if it were not for the fact that the ‘viewpane’ is styled with overflow:hidden; firefox and opera on mac will still scroll! – Any other element with the exact same styling and the browser does not scroll. And as you can see on my live implementation, simply hiding the textarea on page load fixes this… but at this point I’m just curious if it can be fixed without a workaround, or if this is possibly a browser bug.

    you can see a stripped down example of the problem here here: http://jrgould.com/test/textareaex.html

    and here is a ‘control’ – same code but instead of a <textarea> I have used an <input> : http://jrgould.com/test/inputex.html

    I had a hard time explaining this so I hope the examples make it clear what I am asking.

    Thanks!
    -Jeff

    Rob
    # February 27, 2009 at 7:22 pm

    im on a PC – not sure that will render it any different… and tbh – I have no idea what you are tryin to show me LOL I have no scrollbars…

    # February 28, 2009 at 3:07 am

    Yep,this doesn’t seem to happen in any of the Windows browsers I’ve tested (IE6, IE7, FF3, Chrome), which is what leads me to believe it’s a bug rather than just another lovely quirk.

    in Firefox and Opera on the mac I get scrollbars because the height of <body> is being expanded to where the
    <textarea> is relative to the <body> – but I shouldn’t because the <textarea> is in a div that is the child of another div that is set to be 500px high and is styled with overflow:hidden;

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".